Artikelen » (x)HTML, XML en CSS » Artikel
CSS Hacks
26-11-2011 13:04
CSS Hacks
99% van de internetbezoekers gebruikt een correcte webbrowser die CSS ondersteunt, toch werken ze allemaal anders. In dit artikel zal ik een aantal problemen proberen op te lossen, wat toch wel erg gemakkelijk is
!
Hiervoor gebruiken we CSS hacks.
Aandacht
Internet Explorer 7 heeft de meeste problemen die zich op het gebied van CSS voor deden verholpen. Daarnaast, wanneer je goede html en CSS code schrijft, zijn de meeste problemen al snel de wereld uit. Veel websitebouwers maken daarnaast voor browsers verschillende stijlbladen. Daar ga ik nu niet op in.
Probleem
We ga er nu vanuit van het volgende probleem. Stel je hebt een header gemaakt en die ziet er in Firefox gewoon goed uit wanneer je de margin-bottom op 10px zet, maar deze ruimte blijkt in Internet Explorer te weinig te zijn en hier moet je de margin-bottom op 25px zetten.
De CSS code die je dus zou moeten gebruiken is:
Dit blijkt helaas niet te werken in verschillende browsers, want alleen de tweede regel wordt gebruikt, en de eerste wordt niet toegepast. Hiervoor moet je dus een oplossing gaan zoeken.
(FireFox is gewoon de beste browser, maar niet iedereen gebruikt die helaas..)
Hack voor Internet Explorer
Om Internet Explorer (IE) anders te benaderen gebruiken we de 'child selector' commando, wat IE niet kan intepreteren. Deze 'child selector' koppelt twee elementen. Dus html>body verwijst naar het 'kind' (child), body, die zich bevindt in de 'ouder' (parent), html. Wanneer we weer bovenstaand voorbeeld gebruiken dan wordt dit:
IE begrijpt de tweede regel niet en zal dus automatisch de eerste regel toepassen, terwijl Firefox en andere browsers deze tweede regel wel kunnen intepreteren en dus zullen toepassen.
Hack voor Internet Explorer 7
Gelukkig heeft IE 7 al een veel betere ondersteuning in CSS.
Ook al heeft IE 7.0 een betere ondersteuning gekregen als het gaat om CSS, bijvoorbeeld wordt :first-child nu wel ondersteunt en in vroegere versies niet, toch blijven er niet ondersteunde onderdelen. De child selector wordt door IE 7.0 ook ondersteunt, de truc zoals boven beschreven werkt voor deze browser dus niet meer, maar ook hier is weer een oplossing voor. Namelijk door achter het 'groter dan' teken een leeg commentaar symbool te openen en te sluiten. Voorbeeldje:
Waarom dit kan? Geen idee, maar het werkt wel.
Hack voor IE 5.x en 6.0
Tenslotte de hack die je kunt gebruiken wanneer je alleen iets wilt laten zien in IE 5.x en 6.0, en dus niet in andere browsers.
Ik ga niet in voor IE 4 en 5 en IE voor de mac.
Deze worden nergens meer gebruikt (hoop ik dan maar) Anders lopen ze een aantal jaar achter en zullen ontzettend veel websites verkeerd worden weergegeven.
99% van de internetbezoekers gebruikt een correcte webbrowser die CSS ondersteunt, toch werken ze allemaal anders. In dit artikel zal ik een aantal problemen proberen op te lossen, wat toch wel erg gemakkelijk is
! Hiervoor gebruiken we CSS hacks.
Aandacht
Internet Explorer 7 heeft de meeste problemen die zich op het gebied van CSS voor deden verholpen. Daarnaast, wanneer je goede html en CSS code schrijft, zijn de meeste problemen al snel de wereld uit. Veel websitebouwers maken daarnaast voor browsers verschillende stijlbladen. Daar ga ik nu niet op in.
Probleem
We ga er nu vanuit van het volgende probleem. Stel je hebt een header gemaakt en die ziet er in Firefox gewoon goed uit wanneer je de margin-bottom op 10px zet, maar deze ruimte blijkt in Internet Explorer te weinig te zijn en hier moet je de margin-bottom op 25px zetten.
De CSS code die je dus zou moeten gebruiken is:
Code | Selecteer Alles |
|---|
|
Dit blijkt helaas niet te werken in verschillende browsers, want alleen de tweede regel wordt gebruikt, en de eerste wordt niet toegepast. Hiervoor moet je dus een oplossing gaan zoeken.
(FireFox is gewoon de beste browser, maar niet iedereen gebruikt die helaas..)
Hack voor Internet Explorer
Om Internet Explorer (IE) anders te benaderen gebruiken we de 'child selector' commando, wat IE niet kan intepreteren. Deze 'child selector' koppelt twee elementen. Dus html>body verwijst naar het 'kind' (child), body, die zich bevindt in de 'ouder' (parent), html. Wanneer we weer bovenstaand voorbeeld gebruiken dan wordt dit:
| Code | Selecteer Alles |
|---|
|
IE begrijpt de tweede regel niet en zal dus automatisch de eerste regel toepassen, terwijl Firefox en andere browsers deze tweede regel wel kunnen intepreteren en dus zullen toepassen.
Hack voor Internet Explorer 7
Gelukkig heeft IE 7 al een veel betere ondersteuning in CSS.
Ook al heeft IE 7.0 een betere ondersteuning gekregen als het gaat om CSS, bijvoorbeeld wordt :first-child nu wel ondersteunt en in vroegere versies niet, toch blijven er niet ondersteunde onderdelen. De child selector wordt door IE 7.0 ook ondersteunt, de truc zoals boven beschreven werkt voor deze browser dus niet meer, maar ook hier is weer een oplossing voor. Namelijk door achter het 'groter dan' teken een leeg commentaar symbool te openen en te sluiten. Voorbeeldje:
| Code | Selecteer Alles |
|---|
|
Waarom dit kan? Geen idee, maar het werkt wel.
Hack voor IE 5.x en 6.0
Tenslotte de hack die je kunt gebruiken wanneer je alleen iets wilt laten zien in IE 5.x en 6.0, en dus niet in andere browsers.
| Code | Selecteer Alles |
|---|
|
Ik ga niet in voor IE 4 en 5 en IE voor de mac.
Deze worden nergens meer gebruikt (hoop ik dan maar) Anders lopen ze een aantal jaar achter en zullen ontzettend veel websites verkeerd worden weergegeven.