Michel Vuijlsteke's weblog

Tales of Drudgery & Boredom.

Like assholes

Wat ze over opinies zeggen: dat ze gelijk achterwerken zijn, in dat iedereen er één heeft. Daar is iets voor te zeggen, natuurlijk, en iedereen zijn waarheid ook.

Ik heb respect voor veel opinies: of deze dan wel gene muziekgroep, schilder, dichter, schrijver, beter is. Of Guernica lelijke brol is dan wel geniaal, dat soort zaken.

Maar hoe ouder ik word, hoe vreemd genoeg méér stellige overtuigingen ik heb, en hoe minder ik voor sommige zaken bereid ben om te relativeren. En ik die dacht dat het net de jeugd was die in absoluten denkt, en de oudere jongere die het allemaal in een ruimer perspectief ziet.

Het kan zijn dat ik binnen een jaar of tien opnieuw milder ga worden, maar nu: nee dus. Mijn bloed kan koken als ik mensen manifest verkeerde dingen hoor verkondigen, of manifest onrecht zie gebeuren, of manifest idiotieën weet gebeuren.

“Manifest” volgens mij, natuurlijk, dat spreekt.

Deze opinie over conditional comments maakte mij helemaal spinnijdig: hoe kan iemand zó verkeerd zijn?

Waar het over gaat. Webpagina’s worden tegenwoordig voor het grootste deel structuur gegevenin HTML en vorm in CSS. Allerlei verschillende browsers interpreteren die CSS op allerlei verschillende manieren. Soms helemaal anders, soms subtiel anders. Internet Explorer doet notoir moeilijk, vaak.

En dan zijn er ruwweg drie mogelijkheden om daar mee om te gaan:

  1. Niets doen, ‘t is te zeggen, één versie maken van de CSS-file en ervoor zorgen dat alles zo goed en zo kwaad mogelijk in alle browsers goed werkt,
  2. conditionele comments gebruiken,
  3. css hacks gebruiken.

De meneer van de link hierboven zei, ondertussen trouwens een hele tijd geleden, ik ben er maar op gevallen via een recentachtig artikel op A List Apart, dat conditionele comments evil zijn.

Die dingen zien er zo uit:

<link rel="stylesheet" href="styles.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" href="ie.css" />
<![endif]--> 

Laad in alle geval styles.css in, en als het een andere browser is dan Internet Explorer, dan staat de rest uitgecommentarieerd: <!-- is het begin van een comment, –> het einde. Enkel Internet Explorer doet iets met die [if] en [endif], in dit geval: als de browser een versie van Internet Explorer minder dan 7 is, laad dan ie.css in.

Dus met andere woorden: het gros van de css staat in styles.css, en voor die paar dingen waar het in Internet Explorer 5 en 6 de mist in gaat, staan de uitzonderingsregels gespecificeerd in ie.css.

Proper, toch? En binnen een paar jaar zal dat nog altijd werken, want geen enkele andere browser zal ooit diezelfde syntax gebruiken: in het slechtste geval is het een comment en wordt het allemaal links gelaten.

En wat stelt die Jens Meiert? Dat CSS hacks te verkiezen zijn boven conditionele comments. Dat is zó verkeerd, zo patent absurd, zo nonsensicaal, dat ike r haast geen woorden voor heb.

CSS hacks werken door bugs te exploiteren in de verschillende implementaties van CSS door de verschillende browsers. Ze maken de CSS onleesbaar wegens overal verspreid en uit hun aard lelijk, en ze zijn onbetrouwbaar want (a) de bugs in kwestie kunnen uiteraard gefixed worden — wat gebeurde met Internet Explorer 7, die maakte gehakt van zowat alle hacks — en (b) ze zorgen voor nachtmerries omdat het nooit duidelijk is welke hack nu precies in welke browser wat deed, en hoe een bepaalde hack andere dingen al dan niet gaat breken.

Een voorbeeld van zo’n ding:

strong { color: #f00; } 
html:not([dummy]) strong { color: #0f0; }
@media all and (min-width: 0px) { strong { color: #00f; } }

Die eerste regel zorgt ervoor dat in Internet Explorer <strong> rood zal zijn, de tweede dat <strong> in Firefox en Safari groen zal zijn, en die derde dat <strong> in Opera blauw zal zijn. A la bonne heure!

Nog een voorbeeld, de box model hack:

.meta { 
  width: 300px; 
  voice-family: "\"}\""; 
  voice-family:inherit;
  width: 250px;
}
html>body .meta {
  width:250px;
} 

Dat zorgt ervoor dat pakweg een div met class=“meta” op Internet Explorer (5.0–6.0) 300 pixel breed is en op Firefox en Opera en zo 250 pixels. En in het “echt” zullen ze dan misschien allemaal even breed uitzien, wegens een afwijkende manier van met border om te gaan.

O ja, absoluut. Véél eenvoudiger.

Nijdig word ik daarvan.

4 Comments

  1. “Maar hoe ouder ik word, hoe vreemd genoeg méér stellige overtuigingen ik heb, en hoe minder ik voor sommige zaken bereid ben om te relativeren”: check eens bij uw ouders. Die van mij hebben alle2 gezegd dat ook dat weer overgaat, als je NOG wat ouder wordt. Wellicht zal je dit niet aanvaarden,gelet op de inhoud van het artikel, en misschien klopt het ook niet voor jou, maar ik zeg het maar.

  2. Microsoft slaagt voor Acid2-test met IE8

    Ze gaan er nog geraken hoor … uiteindelijk :-)

  3. Als het dan toch over CSS gaat:

    Onder Safari staan alle bullet’s van je lijsten in de grijze marge omdat je geen left-margin op je UL’s en OL’s hebt gedefinieerd. -mozilla-padding-start werkt niet voor Safari.

  4. Molly Holzschlag (cfr. webstandards.org) blogde net ook over css-bugs en hoe ze aan te pakken. Naast hacks en CC’s haalt ze als 3de mogelijkheid ook ‘corrective’ javascript libraries aan (cfr. IE7 van Dean Edwards, waarmee IE6 min of meer standards-compliant wordt). In welke omstandigheden deze ‘oplossingen’ in welke volgorde aangewend worden, is een kwestie van methodologie (ervaring) en daar had ze graag feedback van haar lezers over …

Zeg uw gedacht