Css Snippets » FireFox

FireFox 2 hack

Mark — Wed, 02 Dec 2009 07:08:59 +0000

Misschien moet je ooit nog ondersteunen, en kan je niet anders als een hack toevoegen, hier is een manier om je CSS te hacken voor FireFox 2.

CSS

body:empty #idName {
display: block;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Toon altijd FireFox scrollbar

Mark — Sat, 14 Nov 2009 06:19:33 +0000

De verticale scrollbar in Firefox wordt in tegenstelling tot Internet Explorer niet getoond indien niet nodig vanwege te weinig inhoud, Opera en Safari tonen de scrollbar ook enkel als nodig blijkt.

Soms kan dat in websites tot een “jump” (verspringen) leiden van je inhoud, wens je dit te voorkomen kun je voor Firefox de verticale scrollbar altijd tonen:

CSS

html {overflow:-moz-scrollbars-vertical;}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Border-radius: maak ronde hoeken met CSS

Mark — Thu, 15 Oct 2009 07:30:57 +0000

Met de komst van CSS3 is het mogelijk via CSS ronde hoeken te bepalen voor elementen, momenteel hebben enkel FireFox/Mozilla en Safari 3 deze optie geïntrigeerd.
Andere browsers zullen het dus voorlopig nog zonder moeten doen, maar hoe gebruik je nu border-radius?

CSS3 (nog niet klaar!!)

CSS

#foo {
border-top-right-radius: 10px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 10px;
}
#foo {
border-radius: 5px; /*alle hoeken hetzelfde*/
}

Safari/webkit

CSS

#faa {
webkit-border-top-right-radius: 10px;
webkit-border-bottom-right-radius: 5px;
webkit-border-bottom-left-radius: 5px;
webkit-border-top-left-radius: 10px;
}
#faa {
webkit-border-radius: 5px; /*alle hoeken hetzelfde*/
}

FireFox/Mozilla

CSS

#fee {
moz-border-radius-topright: 10px;
moz-border-radius-bottomright: 5px;
moz-border-radius-bottomleft: 5px;
moz-border-radius-topleft: 10px;
}
#fee {
moz-border-radius: 5px; /*alle hoeken hetzelfde*/
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Target=_blank op de XHTML manier

Mark — Fri, 18 Sep 2009 10:35:24 +0000

Soms kan je niet anders en moeten links naar een externe site openen in een nieuw venster, maar je kan niet target=_blank gebruiken omdat dan je XHTML niet meer XHTML zou zijn. Met een beetje javascript kan je dit oplossen:

HTML

Je originele link

external link

Aangepaste link

external link

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Toon scrollbar in Firefox altijd

Mark — Thu, 10 Sep 2009 09:05:18 +0000

In Firefox wordt de scrollbar niet getoond als de content niet lang genoeg is, dit kan tot een “jump” van je content zorgen moest de inhoud plots langer word door bijvoorbeeld een div die open klapt door javascript. Dit kan je vermijden door de scrollbar altijd te tonen:

CSS

html{
overflow:-moz-scrollbars-vertical;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Veranderen van tekst-selectie kleur

Mark — Sun, 06 Sep 2009 08:22:53 +0000

Als je tekst selecteert in een browser is de kleur van de selectie altijd blauw, en de tekst wit, maar je kan als je wil dit aanpassen met css.
Opgelet: dit werkt enkel in FireFox (mozilla), Safari en de best browser ever: Opera.

CSS

/* Mozilla based browsers */
::-moz-selection {
       background-color: #FFA;
       color: #000;
}
/* Works in Safari & Opera*/
::selection {
       background-color: #FFA;
       color: #000;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Formulier velden en line-height in FireFox probleem

Mark — Mon, 31 Aug 2009 17:58:41 +0000

FireFox is de neige browser die een probleem heeft als er line-height gebruikt word in formulier velden, en is altijd een offset van 2px aan de bovenkant, elke ander browser (zelfs IE6) rendert dit correct af.
Je kunt dit probleem oplossen door de FireFox 3 only hack te gebruiken:

Standaard CSS

CSS

#search-theme-form .form-text {
width: 124px;
height: 19px;
border: 1px solid;
border-color: #717171 #b4b4b4 #dadada #b4b4b4;
padding: 0 0 0 3px;
background: url(../images/search-bkg.gif) no-repeat top right;
line-height: 19px;
color: #9c9c9c;
font-size: 1.2em;
}

FireFox CSS

Volgende regel zet je het best direct nadien:

CSS

html>/**/body #search-theme-form .form-text,
x:-moz-any-link,
x:default {
height: 17px;
padding-top: 2px;
} /* Only FireFox 3 */

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Eenvoudig en valid CSS hacken

Mark — Mon, 01 Jun 2009 06:44:39 +0000

Als je in je stylesheet hacks gaat inbrengen kan je daarmee de validatie ervan zeer sterk naar de knoppen helpen. Volgende manieren laten je toe valide CSS te schrijven die tegelijk als CSS hack kan dienen voor verschillende browsers. Voor Google Chrome en Apple Safari hacks kan je deze CSS Snippet raadplegen.

IE6 en minder

CSS

* html {}

IE7 en minder

CSS

*:first-child+html {}
* html {}

Alleen IE7

CSS

*:first-child+html {}

Alleen IE7 & moderne browsers

CSS

html>body {}

Alleen moderne browsers (niet IE7)

CSS

html>
/**/body {}

Recente Opera 9 en minder

CSS

html:first-child {}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Drop Shadow zonder afbeelding, extra

Mark — Sun, 15 Mar 2009 21:53:52 +0000

De illusie criëeren van een schaduw op bepaalde elementen is niets nieuws meer, het kan op verschilende manieren worden verkregen, maar toch wel hoofdzakelijk met afbeelding(en).
Deze versie gaat een stapje verder, probeer het maar eens uit.

HTML

CSS

.dropShadow {
position:relative;
z-index:1;
float:left;
}
/*border boxes; inside-->outside*/
.dropShadow .drop1, .dropShadow .drop2, .dropShadow .drop3,
.dropShadow .drop4, .dropShadow .drop5 {
position:absolute;
right:0;
bottom:0;
width:100%;
height:100%;
}
.dropShadow .drop1 { opacity:0.5; }
.dropShadow .drop2 { opacity:0.4; }
.dropShadow .drop3 { opacity:0.3; }
.dropShadow .drop4 { opacity:0.2; }
.dropShadow .drop5 { opacity:0.1; }
.dropShadow.dropBR .drop1, .dropShadow.dropBR .drop2,
.dropShadow.dropBR .drop3, .dropShadow.dropBR .drop4,
.dropShadow.dropBR .drop5 {
top:0; left:0;/*shadow positioned bottom-right*/
}
.dropShadow.dropBL .drop1, .dropShadow.dropBL .drop2,
.dropShadow.dropBL .drop3, .dropShadow.dropBL .drop4,
.dropShadow.dropBL .drop5 {
top:0; left:-16px;/*shadow positioned bottom-left*/
}
.dropShadow.dropTR .drop1, .dropShadow.dropTR .drop2,
.dropShadow.dropTR .drop3, .dropShadow.dropTR .drop4,
.dropShadow.dropTR .drop5 {
top:-16px; left:0;/*shadow positioned top-right*/
}
.dropShadow.dropTL .drop1, .dropShadow.dropTL .drop2,
.dropShadow.dropTL .drop3, .dropShadow.dropTL .drop4,
.dropShadow.dropTL .drop5 {
top:-16px; left:-16px;/*shadow positioned top-left*/
}
/*top & bottom borders*/
.dropShadow .drop1 div, .dropShadow .drop2 div,
.dropShadow .drop3 div, .dropShadow .drop4 div,
.dropShadow .drop5 div {
position:absolute;
top:8px;
right:0;
bottom:0;
left:8px;
border-style:solid;
border-color:#999;
}
.dropShadow .drop1 div {
margin:7px -1px -1px 7px;
border-width:1px 0 1px 0;
background-color:#999;
}
.dropShadow .drop2 div {
margin:6px -2px -2px 6px;
border-width:1px 0 1px 0;
}
.dropShadow .drop3 div {
margin:4px -4px -4px 4px;
border-width:2px 0 2px 0;
}
.dropShadow .drop4 div {
margin:2px -6px -6px 2px;
border-width:2px 0 2px 0;
}
.dropShadow .drop5 div {
margin:0 -8px -8px 0;
border-width:2px 0 2px 0;
}
/*left & right borders*/
.dropShadow .drop1 div div, .dropShadow .drop2 div div,
.dropShadow .drop3 div div, .dropShadow .drop4 div div,
.dropShadow .drop5 div div {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:0;
}
.dropShadow .drop1 div div { border-width:0 1px 0 1px; }
.dropShadow .drop2 div div { border-width:0 1px 0 1px; }
.dropShadow .drop3 div div { border-width:0 2px 0 2px; }
.dropShadow .drop4 div div { border-width:0 2px 0 2px; }
.dropShadow .drop5 div div { border-width:0 2px 0 2px; }
/*content being shadowed*/
.dropShadow .dropContent {
position:relative;
z-index:1;
border:1px solid black;
padding:2px;
background-color:#fff;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Geen border op links in FireFox

Mark — Mon, 02 Mar 2009 20:07:49 +0000

FireFox heeft de neiging om een puntjes rand rond actieve links te zetten, door toevoeging van deze korte snippet kan je dit ongewenst euvel behelpen.

CSS

a:focus, a:active {
outline: 0 none;
-moz-outline: 0 none;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon