!Important, ja of neen?
De slechte hack tegenwoordig
Je moest eens weten hoeveel stylesheets ik zo allemaal zie, en telkens denk ik “waarom schrijven die personen zo rare CSS?”
Dat niet iedereen de shorthand methodes kent kan ik inkomen, alsook het trachten van te positioneren door middel van position: absolute en dan verwondert zijn dat bij verandering van schermresolutie alles opeens anders is.
Het gebruik van px als waarde voor tekst is ook nog goed ingeburgerd.
Maar genoeg over het “slechte CSS schrijven” gedeelte, om dit een beetje op te helderen zal ik eens een andere post schrijven.
Vreemd genoeg zie ik nog steeds personen die !Important gebruiken met de veronderstelling dat het effectief iets zal uithalen.
Wat is/doet !Important ?
!Important bestaat al sinds CSS1, en voor de PHP’ers onder jullie, het wil niet zeggen “niet belangrijk”, vanwege de !.
De bedoeling ervan is ervoor te zorgen dat personen, de user, de weergave bepaald door de webdesigner, de auteur te kunnen overtreffen om zo tekst donkerder en groter weer te geven via de ingebouwde functie in hun browser.
Dus als een webdesigner zegt:
p {
color: #900; /*#990000 ofwel rood */
}
en de user heeft dit in zijn browser-stylesheet:
p {
color: #000; !important /*#000000 ofwel zwart */
}
Dan zal de tekst zwart worden weergegeven aan de gebruiker, juist omwille van de !important.
Juist deze !important zorgt ervoor dat de gebruikers-style voorrang krijgt op de style bepaald door de designer.
Hack of niet ?
Dus als jij als webdesigner nu zegt:
p {
color: #900; !important /*#990000 ofwel rood */
}
Juist omdat je wil dat de tekst altijd rood zal zijn, zal dit enkel en alleen maar effect hebben bij personen die geen locale stylesheet hebben.
Bij CSS1 zou je nog kunnen profiteren van het feit dat de designers stylesheet met !important voorrang zou krijgen ongeacht het feit dat de gebruiker een locale stylesheet zou kunnen hebben.
Maar dit voordeel is niet meer van kracht tegenwoordig, nu heeft de gebruikers stylesheet voorrang op die van de designer, ook al heeft deze bepalingen met !important.
En nu ?
Je hebt het natuurlijk niet in de hand of je gebruiker een locale stylesheet heeft, en er bestaan gelukkig geen scripts om dit uit te schakelen, maar waar je wel voor 100% van zeker kan zijn is dat er CSS wordt verwerkt door de grafische browser.
Als een gebruiker je tekst in het zwart wil lezen in plaats dat jij bepaald dat hij normaal gezien rood moet zijn, dan is het nu eenmaal zo, je kan er niets aan veranderen.
Dus probeer nooit positioneringen te doen met de !important declaratie, je design is om zeep als je website door een minder bedeelde persoon wordt opgevraagd die met een locale stylesheet werkt in zijn/haar browser.
Je weet nooit of het je toekomstige baas had kunnen zijn.
Nog 1 ding
Je hoort het misschien al van kilometers komen maar, Internet Explorer kan er niet goed mee overweg !
Gelezen: 11303 | CSS, Tips, Tutorials







Op Thursday 02 March 2006
Je kan het als hack gebruiken voor internet explorer:
color:#0a0 !important;color:#a00;
Zal rood zijn in IE.
Maar je kan nogmeer met !important, je kan namelijk inline-styles overschrijven.
Normaal gesproken zijn inline styles belangrijker dan styles uit het stylesheet, als beide dezelfde proporty veranderen zal de inline-style worden toegepast.
Maar als je !important in je stylesheet erbij zet, dan wordt de style uit het stylesheet toegepast.
En deze techniek werkt wel in IE.
En je kan de selector’s specificity ermee veranderen: cascade.html#specificity
Op Friday 03 March 2006
Beetje off topic maar toch:
Je zegt “Het gebruik van px als waarde voor tekst is ook nog goed ingeburgerd.”.
Het komt over alsof je geen px mag gebruiken als teksteenheid.
Waarschijnlijk zeg je dit omdat IE geen text resizet wanneer de font-size in px is weergegeven.
Dit is een fout van IE, niet van verkeerd gebruik van eenheid (px). De pixel-eenheid is immers speciaal ontworpen voor schermen.
De % of em methodes moet je zien als hack/workaround.
Als we naar toegankelijkheid kijken is het natuurlijk niet meer dan normaal dat we % of em gebruiken, maar eenmaal dat we IE 6.0 niet meer hoeven te ondersteunen, kan er best teruggegaan worden naar px.
k wacht ongeduldig op die dag
Op Friday 03 March 2006
Waarschijnlijk zeg je dit omdat IE geen text resizet wanneer de font-size in px is weergegeven.
Inderdaad !!
Op Friday 03 March 2006
Ik ken de !important rule vooral als een workaround voor het box-border model van ie.
Als dit eigenlijk dient voor userstylesheets om te overriden, wat is dan de beste oplossing ?
@ Hans Leyten: Ik wacht daar even ongeduldig op
Op Monday 06 March 2006
Ik zet
!importantaltijd binnen de code, bijvoorbeeldcolor:#900 !important; background-color:#000;Zo is het wat duidelijker voor mijzelf en anderen.Zelf gebruik ik
!importantvaak voor het overriden van mijn eigen CSS code. In bepaalde gevallen kun je door middel van!importantkortere CSS schrijven.Op Monday 06 March 2006
Duidelijk nog geen verstand van CSS
Op Tuesday 07 March 2006
Nlife, ben je dan niet beter als je daarvoor classes gebruikt om iets af te zonderen ipv iets te overriden?
Kan je als je wilt ook kortere css mee schrijven à la:
.links {float:left}
#nav {/*blaat*/}
Iets
@ Peter: Wat we niet weten kunnen we nog altijd leren
tenslotte is niemand perfect.
Op Wednesday 08 March 2006
Tuurlijk weet ik dat RaDDiX, maar dan moet je de HTML bewerken. En bij sites als Gigastyle kan
!importantwel handig zijn.Op Monday 13 March 2006
!important is een EXTREEM belangrijke tag voor het CSS design van sites die in meerdere browsers goed er exact hetzelfde uit moeten zien. Sterker nog, !important is belangrijker dan belangrijk, hij is zelfs onmisbaar.
.example {
margin-left: 10px !important;
margin-left: 5px;
}
Wie bovenstaande in een stylesheet aantreft, weet dat de designer de ins en outs kent van de verschillende wijze waarop Mozilla, IE, Safari en Opera CSS interpreteren.
Op Monday 13 March 2006
Geloof mij vrij (of ook niet), maar bovenstaande regel is stom.
De tweede regel overtreft de eerste, maar omdat de eerste regel !important heeft zal de 2de regel niet van toepassing zijn, en toch heeft de tweede regel meer kracht als de eerste.
Het is mij nog nooit overkomen dat ik deze manier van werken nodig had, er bestaan eenvoudigere manieren, als je weet CSS te schrijven zonder hacks/*filters voor elke browser, dan pas kan je zeggen dat je iets van CSS afkent.
Neem nu dat een gebruiker op zijn PC
margin-left: 0 !importantheeft staan ?, waar sta je dan ?Op Monday 13 March 2006
Met alle respect, het klopt gewoon echt niet. En dit is waarom: IE negeert
!important, de standaardbrowsers niet. Daarbij komt dat in STRICTe modus, de verschillen tussen IE en overige browsers groter zijn dan in overige modi. Door in het CSS eerst de waarden mee te geven voor de standaardenbrowsers (en die dus vast te zetten met!important), en daarna de waarden voor IE (eronder, en zonder!important), kun je binnen één stylesheet de verschillende type aansturen.Dus: IE negeert
!important, de meeste standaardbrowsers niet. En dit geeft de mogelijkheid binnen één stylesheet verschillende browsers aan te sturen (wat bij de ontwikkeling van grotere webbased applicaties - geloof mij vrij (of ook niet) - veel praktischer werkt dan voor elke browser een aparte stylesheet aan te maken) (overigens even afgezien van mobiele sites)Op Monday 13 March 2006
ik geloof je, goede uitleg.
Genruik je dit vaak ?, ik zelf heb nog nooit !important moet gebruiken, maar lijkt logisch wat je zegt.
Maar ik blijf erbij, zonder gaat ook, waar je mij gelijk zou moeten geven.
Op Monday 13 March 2006
Ja, ik gebruik het vaak. Met name de combinatie float en margin(-left/right) geeft verschillen in IE vs FIFO (soms wel tot 100%). (Waarbij overigens moet worden aangemerkt dat de margin-top meestal gelijk getoond wordt)
Persoonlijk ken ik geen truuk om in bovenstaand geval onder !important uit te komen, dus hou ik me van harte aanbevolen voor ‘nettere’ oplossingen (want straks accepteert de final IE7 ineens wel !important, maar snapt die nog steeds niet hoe margins, borders en paddings geinterpreteerd dienen te worden…)
Op Monday 13 March 2006
In den beginnen plaatse men:
* {margin: 0;
padding: 0;
}
Nu zijn alle margins en paddings gelijk, en als je nu toch float of margins errors krijgt is dat de double-margin bug in IE, en deze kan je oplossen.
Op Tuesday 14 March 2006
Dus maw was m’n box-border work-around toch niet verkeerd aangepakt?
Want dit is eigenlijk de enige fix waarvoor ik !important gebruik.
Ik hoop ook van harte dat IE7 geen webdev catastrofe zal worden. Op het internet kan je trouwens goed de vooruitgang van onze op tilt staande UA volgen. En zoals het er nu uitziet zullen er toch nog redelijk wat bugs in zitten die pas na de release gefixed zullen worden.
Op Tuesday 14 March 2006
“Daarbij komt dat in STRICTe modus, de verschillen tussen IE en overige browsers groter zijn dan in overige modi.”
Groter? je bedoelt zeker kleiner.
In standards mode (STRICTe modus) houd IE zich beter aan de standaarden en zijn er dus minder verschillen tussen IE en andere browsers.
Op Monday 25 September 2006
Ikzelf gebruik twee hacks om de verschillen tussen voornamelijk IE en FireFox op te lossen.
Inderdaad leent !important zich uitstekend, maar het werkt ook als je
[class]achter je class zet. FF leest dit, IE niet.Dus:
.text {padding:30px;}.text[class] {padding:35px;}
Op Wednesday 27 September 2006
Ook weer een hack…
Je moet gewoon goed opletten als je tags nest dat ze dan goed in IE soms de padding van hun parent erven, en ook nog eens een eigen padding krijgen. Dus als je dan twee divs in elkaar hebt staan met kan het zijn dat je padding 2x zo groot wordt in IE, in dat geval kun je proberen een margin te gebruiken ipv een padding
In geval van Daniel zal aan het begin van de stylesheet:
* {margin:0px;
padding:0px;
}
waarschijnlijk ook voldoende zijn
Op Wednesday 27 September 2006
die padding was slechts een voorbeeld, dat overigens niet altijd met
* {margin:0px;
padding:0px;
}
is op te lossen.
het geld bijvoorbeeld ook bij transparante achtergronden dat in ie met die filters gedaan wordt die ff gelukkig niet leest, er zijn natuurlijk nog legio andere mogelijkheden
ik zie het trouwens niet als hacken, maar als normaal programmeren, ik kan me niet voorstellen dat je complexe ontwerpen geheel zonder dit soort css code kan ontwerpen
heb je een voorbeeld dat het wel kan? ik ben wel benieuwd
Op Saturday 07 October 2006
… en als dit soort codes/hacks voor IE niet werken, of sowieso: je kunt altijd ook een “conditional comment” gebruiken om IE van een afwijkende stijl te voorzien (lees: om IE van een IE-only stijl te voorzien om IE-only fouten te corrigeren!).
Met de cc’s kan je ook verschil maken tusen styles voor versies van IE, wat met de gewone hacks niet gaat.
Dit kan heel belangrijk worden als de nieuwe IE7 definitief is (met fixes voor fouten in eerdere versies).
Zie o.a. de MSDN-pagina over conditional comments, met verschillende varianten.
Gegroet!
francky
NB:
Een cond.comm. komt in de html, en behalve daar direct een style in te zetten kun je de cond.comm. ook gebruiken om naar een speciaal IE(-versie) stylesheet door te linken.
Op Tuesday 10 October 2006
Waarom die hacks voor verschillen tussen IE en FF?
In plaats van:
.example {
margin-left: 10px !important;
margin-left: 5px;
}
kan je net zo goed dit doen:
.example {
margin-left: 5px;
}
body > .example {
margin-left: 10px;
}
Firefox ed. ondersteunen wel child selectors, IE niet. Zo kan je zonder hacks met 1 stylesheet toch alles goed weer laten geven.
Op Wednesday 11 October 2006
@Laurence: de code die jij gebruikt, is in principe ook een hack :p
Op Wednesday 11 October 2006
@Laurence: Als ik het goed begrijp zeg jij ongeveer dit:
“Ik heb een ingewikkeldere en langere methode om precies hetzelfde te doen. Dus daarom moet iedereen dat doen.”
Of zoiets.
Am I missing your point, of zeg je daadwerkelijks iets in deze trant?
Op Wednesday 11 October 2006
@Ben:
Hmmm misschien heb je wel gelijk. Nu ik het bekijk lijken de 2 manieren veel op elkaar, alleen de mijne is wat langer. Toch heeft “mijn” manier wat voordelen en vind ik het ‘natuurlijker’ overkomen.
Wat voor voordelen dan? Nou je kan op deze manier extra code toevoegen die door IE helemaal niet gelezen wordt. In sommige gevallen is je code dan wel korter. (nu zet je een regel code neer en overschrijft diezelfde regel meteen weer, je zorgt alleen met !important dat FF het niet overschrijft. Bij de child methode hoef je bepaalde code voor IE niet te ’setten/unsetten’)
Maar wanneer is iets een hack? Zolanghet door de validator komt is het toch goed?
@Thijzo:
Ik heb niet gezegd dat iedereen het zo moet doen, het is een alternatief. Tot nu toe had ik ook alleen nog van deze methode gehoord en niet van de !important manier. In de toekomst zal ik misschien de important truck ook wel gebruiken
@Mac-Doggie:
Hoe goed je je site ook bouwt bij gecompliceerdere dingen ontkom je er niet aan dat je voor IE en FF andere css code nodig hebt.
Op Thursday 12 October 2006
In beide gevallen schrijf je CSS die door de ene browser wordt uitgevoerd, en de andere niet. In beide gevallen ben je dus eigenlijk aan het “valsspelen”.
Ik probeer deze handigheden te vermijden, omdat het vrij veel tijd in beslag neemt om het correct te tonen. En als je erna nog iets moet aanpassen, moet je dubbel opletten…
Ik ben eigenlijk benieuwd hoeveel websites nog correct getoond gaan worden in IE7.
Op Monday 19 October 2009
Wat een onzinartikel is dit zeg. Als je het nut van !important niet ziet vraag ik me af hoe ingeburgerd je zelf bent in de CSS-wereld.
Als je bijvoorbeeld met JS een achtergrondkleur verandert en je hebt bij hetzelfde element een achtergrondkleur voor “hover” ingesteld, zal die waarde voor “hover” ook verloren gaan. Dit is een goed voorbeeld waarin !important van pas komt. De achtergrondkleur wordt veranderd maar de variërende hover blijft behouden.