Defaultní hodnoty okrajů
Hvězdičkový selektor a jeho použití při vynulování přednastavených hodnot prohlížečů.
Nevím jak vás, ale mě docela hafo štvou základní přednastavené hodnoty okrajů (border, margin & padding) jednotlivých prvků webové stránky. Nebylo by na nich nic špatného, kdyby se ovšem výrobci prohlížečů dohodli a sjednotili je.
Řešení
Nejjistější metodou je vynulování okrajů u všech elementů – stejně si je všechny postupně přenastavíte a takto alespoň na nic nezapomenete. Vynulování se provede jednoduchým CSS kódem.
* {border: 0;margin: 0;padding: 0;}
Komentáře
Přesně toto používám už delší dobu na začátku každého stylu. O hodně to usnadní práci ;-)
Akorát ten border mě tak neštve, tak ten nechávám.
Uz si presne nepamatuji, kde jsem na to narazil, ale nedoporucovali tohle pravidlo pouzivat (ackoli je njjistejsi), protoze se vykonava opravdu na kazdy element a v kaskade zpusobuje zdrzeni pri vykreslovani. Ve Firefoxu pry i citelne. A u formularovych prvku muzou zmenit zpusob jejich vykreslovani. Bohuzel si uz opravdu nepamatuji, kde jsem na to narazil…
Výhoda toho zápisu s hvězdičkou se vám taky projeví v Opeře. Pamatuju si, že když jsem to ještě nevěděl, tak jsem si marně lámal hlavu, proč mám v Opeře to menu posunutý?!
Daleko jistější si rovnou na začátku stylesheetu udělat redefinice generických elementů, tohle mi připadá navíc. Ale proti gustu… :-)
Tohle dělám taky, aspoň mám jistotu, že něčemu nezapomenu hodnoty přenastavit. (Nulového marginu atd. si všimnu spíš než nějaké implicitní hodnoty…)
A zas budu rejpat do jazyka: „defaultní“ se česky řekne výchozí.
Přesně toto dělám už od té doby, co znám význam zkratky CSS :) Mnohem radši si vše nastavím sám, než abych spoléhal na nějaké nestálé výchozí hodnoty. Mám to pak, jak již bylo řečeno, pod kontrolou a nemusím řešit, proč mi někde něco odplouvá jinam, než chci :)
Mno tak o tom už jsem psal taky (reagoval jsem tenkrát vlastně na skvělý Plaváčkův spot): http://petr.vaclavek.com/article/77/CSS-figle-od-plavacka
Ale neodpustím si ještě jednu poznámku – pokud vytváříte HTML šablony pro Outlook, budete překvapeni, že hvězdičku zcela ignoruje, takže pozor na to!
Přesně, dělám to taky tak. Ještě bych dodal, že v definici * mám i line-height: normal; kvůli nějakému IE bugu.