KOMPOOS.NL

browser detection - css

home » css » css-browser-detection.html

sitemap


voorbeeld hoe je met CSS een browser detecteert

ie 5

ie 5.5

ie 6

ie 7

ie 8

ie 9

ie/mac

gecko < 1.9

gecko 1.9

webkit

chrome

opera

onbekend

css browser detectie: NIET DOEN!

Deze pagina is maar met één doel gemaakt: Proberen jou te overtuigen om niet met de CSS te gaan knoeien. Het is echt geen probleem als je een conditie maakt om problemen met IE7,IE8 en IE9 te lijf te gaan, en het is ook absoluut geen probleem als je wat hacks toepast om de border-radius in safari of een gradiënt achtergrond in opera te regelen... Zolang je niet de hacks van deze pagina (of van welke oorsprong dan ook) gaat gebruiken om complete stylesheets te maken is er niets aan de hand. Samengevat:

Als je een hack gebruikt om een probleem in de css-code op te lossen is dat geen probleem mits je er voor zorgt dat het een blijvende oplossing is (dat de browser tot in lengte van dagen de hack zal ondersteunen.. IE6/7/8 etc.)

Maak nooit een stylesheet met hacks van browsers die nog volop aan het ontwikkelen zijn. Als vandaag een hack werkt in mozilla of chrome, kan dat morgen geheel anders zijn. En dan kon jouw website wel eens rare dingen gaan doen (voor wat betreft de stabiliteit e.d.). Over chrome gesproken; het feit dat deze pagina chrome herkent, wil niet zeggen dat jou dat ook lukt. Onder de "motorkap" van de kompoos worden vele zaken "geruisloos" met php geregeld... Kijk verder op de site hoe je dit kunt doen. Bijvoorbeeld deze browser-detectie procedure.

Op de kompoos.nl wordt alles in het werk gesteld om zo min mogelijk hacks te gebruiken. De meeste pagina's zijn foutloos op de css, met de aantekening dat W3C de specifieke browser-eigenschappen natuurlijk afkeurt...

Tot slot zet ik de code van deze pagina hieronder neer. Kijk maar welke code je kan gebruiken

stylesheet css browser detectie


<style type="text/css">
        #gecko-oud,#gecko-19,
        .explorer-mac,.explorer-5,.explorer-55,
        .explorer-6,.explorer-7,.explorer-8,
        .explorer-9,#webkit,.opera,.chrome{
        display:none;
        width:180px;
        background-color:#00e;
        border:1px solid #ff0;
        color:#fff;
        font-size:24px;
        font-weight:bold;
        text-transform:uppercase;       
        padding:1em}
        * html .onbekend{
                display:none}
        @media all{
                .explorer-5{
                        display:inline-block}
                .explorer-5{
                        display/**/:none}
                .explorer-55{
                        display/**/: block}
                .explorer-55{
                        d\isplay:none}
                * html .explorer-6{
                        d\isplay: block}
                *:first-child+html .onbekend{
                        display:none}
                *:first-child+html .explorer-7{
                        display:inline-block}
        }
        body:nth-child(258) .opera{
                display:inline-block}
        body:nth-child(258) .onbekend{
                display:none}
        :not(form) > .onbekend{
                display:none}
        :not(form) > .explorer-9{
                display:inline-block}
        @-moz-document url-prefix(){
                .onbekend{
                        display:none}
                [id="gecko-oud"]{
                display:inline-block !important}
                #gecko-19{
                        display:inline-block}
                [id="gecko-19"]{
                        display:none !important}
        }
        @media all and (-webkit-min-device-pixel-ratio: 0){
                .onbekend{
                        display:none}
                #webkit{
                        display:block}
        }
        /*\*//*/
        * html .explorer-mac{
                display: block}
        /**/
        [disabled="disabled"] ~ .onbekend{
                display:none}
        [disabled="disabled"] ~ .explorer-8{
                display:inline-block}
</style>

html code css "detectie"


<p>
        <form action="#"><input disabled type="hidden">
                <p class="explorer-5">ie 5</p>
                <p class="explorer-55">ie 5.5</p>
                <p class="explorer-6">ie 6</p>
                <p class="explorer-7">ie 7</p>
                <p class="explorer-8">ie 8</p>
                <p class="explorer-9">ie 9</p>
                <p class="explorer-mac">ie/mac</p>
                <p id="gecko-oud">gecko < 1.9</p>
                <p id="gecko-19">gecko 1.9</p>
                <p id="webkit">webkit</p>
                <p class="chrome">chrome</p>
                <p class="opera">opera</p>
                <p class="onbekend">onbekend</p>
        </form>
<p>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.