Css Snippets » hack

Conditionele body tag voor IE

Mark — Sat, 27 Feb 2010 07:14:26 +0000

Je kan CSS via conditionele comments (zie eerdere Snippet) toevoegen, maar je kan in plaats van een extra CSS bestand, conditioneel een extra class toevoegen aan zoals in dit voorbeeld de body tag.

HTML

Het enigste wat je nu moet doen is de uitzondering toevoegen aan je reeds bestaande CSS.

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

Vergroten textarea in Safari uitzetten

Mark — Wed, 13 Jan 2010 07:00:05 +0000

Standaard krijg je in Safari browsers de mogelijkheid om textarea te vergroten of verkleinen – re-size. Dit kan je via CSS uitzetten:

Aangeraden is deze snippet in een Safari only hack te zetten

CSS

@media all and (-webkit-min-device-pixel-ratio:0) {
textarea { resize:none; }
}

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

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

Oplossing “trappen effect” in IE6

Mark — Sun, 29 Nov 2009 07:43:18 +0000

Bijna elke webdeveloper gebruikt lijsten om een navigatie te maken, in de lijst maken we dan links en deze floaten we dan en normaal gezien is alles in orde …. voor de moderne browsers. IE6 en IE7 zullen je het trappen effect tonen. Als je het gezien hebt, weet je waarover ik het heb:

Normale code

HTML

CSS

ul {
    list-style: none;
}
ul li a {
    display: block;
    width: 130px;
    height: 30px;
    text-align: center;
    color: #fff;
    float: left;
    background: #95CFEF;
    border: solid 1px #36F;
    margin: 30px 5px;
}

Fixed CSS voor Internet Explorer

CSS

ul li {
    float: left;
}

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

Jquery – Class toevoegen afhankelijk van browser

Mark — Wed, 11 Nov 2009 06:58:55 +0000

Browser sniffing is het bepalen van de gebruikte webbrowser en is iets wat vroeger gebeurde tijdens de browser-wars, nadien was iedereen ertegen. In principe zou elke browser zich moeten houden aan de W3C-specificaties, maar in de praktijk voldoet geen enkele browser daar 100% aan.
Met de volgende eenvoudige Jquery manier kan je een class toevoegen aan bijvoorbeeld je HTML-tag afhankelijk van de gebruikte browser en van daaruit je CSS aanpassen naargelang.

Jquery

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

De beste IE6 hack die alles oplost

Mark — Sun, 08 Nov 2009 06:48:51 +0000

Eén CSS hack voor internet Explorer 6, die alle problemen in één keer oplost? Hij bestaat, maar je moet voor jezelf uitmaken of je hem toepast of niet, wees er voorzichtig mee, maak een statement of blijf ondersteunen:

CSS

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

Haslayout oplossen in IE6 & IE7

Mark — Sat, 08 Aug 2009 09:01:25 +0000

Haslayout is een browser specifieke eigenschap van windows browser Internet Explorer om te zeggen of een element dimensie moet krijgen van zijn siblings (elementen met inhoud in het betreffende element), maar door sommige CSS eigenschappen toe te passen verandert dit soms naar Haslayout-1 en krijg je niet hetzelfde effect als in andere browsers. Hoe je dit kunt oplossen met volgende 2 kleine CSS Snippets:

Conditionele CSS voor IE6

Conditionele CSS voor IE7

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

Oplossen :first-child CSS bug in IE 7

Mark — Fri, 19 Jun 2009 14:24:16 +0000

Het zal je zelden voorkomen, maar de ondersteunde pseudo-selector :first-child in Internet Explorer 7 werkt niet meer als je je :first-child in de HTML vooraf gaat met een HTML comment, bekijk volgend voorbeeld:

Foute HTML (in ie7 werkt de css niet meer)

HTML


    
    Start page
    News
    Contact

CSS

li {
    background: red;
}
li:first-child {
    background: blue;
}

Correcte HTML (in ie7 werkt de css weer wel)

HTML


    Start page
    News
    Contact

CSS

li {
    background: red;
}
li:first-child {
    background: blue;
}

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