Přejít k navigační liště

Zdroják » Webdesign » CSS zbytečnosti

CSS zbytečnosti

Články Webdesign

CSS konstrukce, které nejspíš píšete zbytečně.

Nálepky:

Článek původně vyšel na autorově webu Je čas.

Během objevování a učení se kaskádovým stylům (CSS) si člověk snadno přivykne na zbytečně komplikované konstrukce, které začne používat z neznalosti. Potom si na ně navykne a ze setrvačnosti je často používá, i když už CSS docela rozumí…

margin: 0 auto

Hodnotu horního a spodního marginu není při vodorovném centrování třeba explicitně uvádět.

Prosté:

margin: auto

Funguje naprosto identicky.

Nejspíš jediná výjimka, kdy se výsledek „margin: auto“ a „margin: 0 auto“ liší, je centrování absolutním posicováním.

Nula před desetinnou tečkou

Jak tomu tak bývá, v programování jde při zápisu desetinných čísel vypustit nulu na začátku.

.5 +.5 = 1

Jde to praktikovat i v CSS:

margin: .5em;

Jednotky u hodnoty 0px

Je-li nějaká hodnota nastavena na nulu, je zbytečné uvádět jednotky (0px, 0em a podobně). Nula bude pořád nula.

element {
  height: 0px;
}

Uvozovky kolem URL/písem

element {
  background: url("obrazek.png");
  font-family: 'Název písma';
}

Při zadávání URL obrázku do CSS funkce url jsou uvozovky nepovinné.

Při uvádění fontu (font-family) jsou uvozovky nutné jen v případě, že název písma obsahuje čísla a speciální symboly.

Středník

Jednotlivé CSS deklarace bývají oddělovány středníkem (;). Středník není nutné psát za poslední deklarací pro daný selektor.

.uzasnyStyl {
  color: red;
  text-align: center
}

Při používání strukturovaného CSS to ale dost zavání zapomenutím středníku při připsání dalšího předpisu.

U řádkového CSS to problém není.

.uzasnyStyl {color: red; text-align: center}

Obtékaný element se stane blokovým

Je-li element plovoucí (tj. má nastaven float), stane se automaticky blokovým (display: block).

.obtekany {
  float: left;
  display: block;
}

Blokovým se stane i element s výslovně nastaveným display: inline, display: inline-block nebo display: table-cell a podobně.

Výjimka je obtékaný element s display: table – tabulkové zobrazení se zachová. Obdobně se chová hodnota list-item, která je výchozí u odrážek seznamů. Rozplavaná položka seznamu bude stále display: list-item.

Absolutně posicovaný element se stane blokovým

Je-li element posicován absolutně nebo fixně, stane se z něj automaticky display: block bez nutnosti to uvádět.

.posicovany {
  position: absolute;
  display: block;
}

Dopočítávání hodnot

CSS vlastnosti mající varianty pro všechny strany *-top, *-right, *-bottom a *-left jde zadávat do sdružené vlastnosti.

Konstrukce:

margin: 1em .5em .3em;

Odpovídá:

margin-top: 1em;
margin-right: .5em;
margin-bottom: .3em;
margin-left: .5em;

Zkratky CSS vlastností

Řada CSS vlastností má tzv. zkratku.

border-width: 1px;
border-style: solid;
border-color: red;

Předchozí rámeček tak jde zapsat jako:

border: 1px solid red;

I při použití zkratky není třeba uvádět všechny hodnoty. Pro zrušení rámečku tak stačí:

border: 0;

Obdobně pro zrušení odrážek seznamu stačí použít list-style: none, místo list-style-type: none, jak bývá často k vidění.

Příliš konkrétní selektory

Řekněme, že je cílem v následujícím HTML kódu zaměřit odkaz (značku <a>).

<div class="menu">
  <ul>
    <li><a href="">Odkaz</a></li>
  </ul>
</div>
  1. Jedna extrémní varianta je selektor typu:
    div.menu ul li a {}
  2. Na opačné straně stojí:
    .menu a {}

Obecně bývá lepší používat spíš druhý způsob s jednodušším selektorem.

  1. Má kratší zápis.
  2. Nemá zbytečně vysokou prioritu. Kvůli případnému přepisování vlastností je dobré držet sílu selektorů co nejnižší.
  3. Jednodušší selektor je rychlejší na vyhodnocení. To je spíš teoretická výhoda – i komplikovaný selektor bude pořád hodně rychlý.

Dědičnost barvy

Rámečky border, ale i outline, box-shadow nebo text-shadow dokáží dědit barvu, která se nachází ve vlastnosti color.

Rámeček převzal barvu z color

Stín převzal barvu z color

Uvádění šířky

Blokový element dle výchozích stylů automaticky vyplní všechnu dostupnou šířku.

Nastavovat pro vnořený element stejnou šířku, jako má jeho rodič, je tudíž zbytečné.

<div style="width: 400px">
  <div style="width: 400px">
    Vnořený element
  </div>
</div>

Totéž platí pro nastavování šířky na 100 % pro roztažení přes celou plochu – to je výchozí chování blokového elementu.

Zbytečné CSS prefixy

K vidění bývá používání CSS prefixů pro vlastnosti, které daný prohlížeč s prefixem nikdy nepodporoval – například -ms-transition.

Podobný případ je vlastnost -moz-opacity – od Firefoxu 0.9 (rok 2004) funguje prosté opacity.

Poděkování

Na sesbírání jednotlivých zbytečností se podíleli: habendorf, Bubák, Keil a Chamurappi.

Komentáře

Subscribe
Upozornit na
guest
25 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
pavel

Středník není nutné psát za poslední deklarací pro daný selektor.

Pokud přidám další deklaraci, tak budu muset doplnit i chybějící středník. Nebo na to zapomenu a chyba je na světě.
V programování se řídím pravidlem, že pokud je něco nepovinné, tak to tam tuplem dám.

patrik

Přesně.

Jednotky u hodnoty souhlas, to moc nedává smysl je tam psát, ale středníky, uvozovky, a i ta nula před desetinnou čárkou… To je spíš hloupost, a lenost.

Oldis

No ty jednotky, dneska tam napisu 0, ok, zejtra tam budu chtit napsat o neco vice, nj ale ceho? brambor? hrusek?budu muset hledat.

anti.cz

Souhlas. Ono uz jenom kvuli tomu, ze ve Chrome mi pak staci dvouklik na hodnotu a pak sipkou pridavat pixeli, em.., ale je to zvyk, ja v podstate styluji jen v conzoli a pak to prekopirovavam. U nikoho jineho jsem to jeste nevidel, ale nemusim refreshovat.

mboy

no a potom pride situacia ako transition-duration: 0s; a clovek tam zo zvyku neda jednotku a ono mu to nebude fungovat v chrome lebo tam je ta jednotka skrakta vyzadovana

Marek Sirkovský

„Při používání strukturovaného CSS to ale dost zavání zapomenutím středníku při připsání dalšího předpisu.“
Uvedeno o řádek níž:) Pokud byl článek editován – tak dopředu sorry:)

Velda

1) Může mi autor vysvětlit, co je to slovo posice a co je to posicování? ****

2) rozdíl mezi „.menu a“ a „div.menu ul li a“
**** Konkrétnost selektoru má s jeho rychlostí jen pramálo společného. Taky pokud vím, tak se selektory vyhodnocují zprava doleva, takže rozdíl mezi rychlostmi těchto selektorů bude 0,0nic. Asi by byl rychlejší v případě elementu, který tomu pravidlu vyhoví, ovšem on se bude provádět i pro všechny ostatní odkazy na stránce a tam ta rychlost bude bez signifikantního rozdílu. Takže oba selektory jsou prakticky stejně blbé.
A asi by bylo vhodné např. napsat „.menu > ul > li > a“, ****.

(Komentář byl upraven redakcí.)

Dvorapa

Autor pravděpodobně neudělal chyby bezděčně, hádám, že je to autorův styl, kterým se snaží trochu oživit/odlišit svoje články. Překážka pro čtení to příliš není, po pár řádcích si oko čtenáře zvykne. Nechápu ještě, proč se Vám nelíbí druhý krátký zápis CSS? Co je na něm špatně? Autor dal pouze ukázkový příklad, aby si čtenář uvědomil, že to většinou bývá zbytečné vypisovat vše. A jak je mi známo, mnoho začátečníků v CSS tuhle chybu bohužel hojně dělá. Jestli nejsou oba příklady úplně podle Vaší oblíbené CSS taktiky, pak myslím, že je zřejmé, že to není předmětem tohoto článku.

Velda

Jde o tento kousek textu „Jednodušší selektor je rychlejší na vyhodnocení. To je spíš teoretická výhoda – i komplikovaný selektor bude pořád hodně rychlý.“, který není pravdivý. Nelíbí se mi pro to, že v uvedeném příkladě jsou oba selektory v praxi stejně pomalé, mnou uvedený selektor je podstatně rychlejší („.odkazVMenu“ by byl pochopitelně ještě rychlejší, asi i nejrychlejší možnost).

Oldis

jeste moh vymenit v za w a podobně a bylo by to dokonalé ;)

Jirka

Zajímavě agresivní komentář.

1) „S“ se v těchto případech klidně používat může – jde sice o starou, ale stále platnou variantu.

2) Preference kratších specifikací umožňuje v praxi jednodušší následné přebití hodnoty pro specifické subpřípady.

Velda

1) To ano, ale u odborného textu. :-)

2) Nepřu se s bodem 1) a 2), nýbrž s bodem 3), který je pokud to řekneme natvrdo, lživý.

Martin Hassman

Komentář jsem upravil. Veldovi doporučuji, pokud by chtěl i v budoucnu psát komentáře na Zdroják, aby se naučil pravidla slušného chování a vystupování v diskusích; i když z něčím nesouhlasí, nebo to považuje za chybu, je přesto možné respektovat autora jako člověka a sdělovat svůj vlastní názor laskavým způsobem.

Velda

*****

2) Pokud autor sděluje názor, mělo by to tak být uvedeno a né uvedeno tím způsobem, jako by to byl fakt.
„Jednodušší selektor je rychlejší na vyhodnocení. To je spíš teoretická výhoda – i komplikovaný selektor bude pořád hodně rychlý.“
Kde vidíte v tomto úryvku známku toho, že se jedná o autorův názor? Napsal to jako fakt, přičemž je to ale naprostá blbost. Tohle není blog… Tedy, aspoň jsem myslel, že je to seriózní web a na seriózní web takové nepravdivé a navíc ještě zavádějící tvrzení nepatří. Z tohoto článku určitě v budoucnu budou čerpat nějací lidé, ale už nebudou vedět, že je fakticky nepřesný (v tomto tvrzení).

“ i když z něčím nesouhlasí, nebo to považuje za chybu“ a možná tady je identifikován problém spíš ve Vašem názoru. Tady nejde o to, že s tím nesouhlasím, nebo že to považuji za chybu, ale že to CHYBA JE (což samozřejmě u rozumného člověka předchozí 2 věci implikuje).

*****

http://www.strejda-google.cz/#css+selector+right+to+left

(Komentář byl upraven redakcí.)

Martin Hassman

Odstranil jsem v komentáři provokace a ponechal to důležité.

Navážu na své původní vysvětlení a pokusím se být nyní jasnější. (Mimo jiné i protože toto není blog,) tu podporujeme diskuse o obsahu a tématu článku a naopak nepodporujeme diskuse napadající autora či komentující. To první je užitečné, druhé zbytečné někdy i škodlivé. (Krásné na tom je, že obě diskutování podmínky lze splnit současně, jinak by to nedávalo smysl.)

Zkuste prosím příště neplýtvat hned od začátku energií na napadání a místo toho ji směřujte do komentování/upřesňování/opravování obsahu, osvícení čtenáři vám budou vděčni. Oddělte hrubé od jemného.

I váš kritický názor lze vyjádřit vhodným (například laskavým) způsobem. Nic na tom nemění, zda pravdu zrovna máte či nemáte. O pravdivosti a validnosti vašeho názoru k obsahu jsem se nevyjadřoval (a nekomentuji to ani nyní), vyjádřil jsem se pouze k formě sdělení, zbytečně proto mé „neexistující vyjádření k pravdivosti“ kritizujete. Dokonce ani k „názoru autora“ jsem se nevyjadřoval, ač toto mé nevyjádření zbytečně kritizujete. Je to nejen zbytečné, ale jedná se zde o archumentační omyl nebo dokonce faul – obojího bychom se měli všichni snažit vyvarovat.

Zkuste si to prosím vzít k srdci. (To píšu vážně, bez sarkasmu, ironie či výsměchu.)

Mino

1) Taky, kdyz jsem jeste na unversite studoval fysiku, tak jsem to dokonce mel v nazvu jedne ucebnice („..bla bla neco VE FYSICE bla bla..“). Nejsem cech, divil jsem se, starsi pan profesor mi vysvetlil, ze je to stara forma, ze to tak predtim bylo furt, a ze lidi to porad takhle muzou psat. Spomnel jsem si na to u cteni tohoto clanku :)

2) Mozna vidis sam, ze je zbytecne pouzivat „html body .trida“, ze staci jenom „.trida“. To co pise autor vyse neni nic jineho. Ve skratce je lepsi byt vice specifiky jenom v pripadech, kdyz ti vice specificky selector je k necemu uzitecny.

Cestinar

Někteří lidé ve své prose používají these a frase dle konservativního usu, často to bývá jejich posa :-)

Tomáš Kapler

Tohle všechno jsou takové knížecí rady, které jsou sice správné, možná ušetří i pár bytů, ale spíš se jedná o bad practice a učí to programátory/kodéry špatným zvykům, které je v důsledku budou stát víc času. Navíc to jsou všechno rady, které kodér nemusí řešit, když pak použije nějaký css minifier, který to udělá za něj.
Příklad takových blbostí – středník na konci. Jasně, být tam nemusí, ale když pak chcete napsat další řádek, musíte koukat, jestli tam je či není středník.
Podobně nula bez px, či obecně jakékoliv jiné úpravy, které vznáší nejednotnost do zápisu stejných typů hodnot.

Tomáš Bedřich

Co je „speciální znak“ ve jménu fontu? Je to i mezera?

anti.cz

Mezera to neni, ale tech pravidel na ty uvozovky je trochu vice.

Do I need to wrap quotes around font family names in CSS

CSS 2.1 spec tady jsou i priklady tech znaku

Peter Širka

Výrobný článok.
Ďakujem.

Jirka Kosek

Jednodušší selektor je rychlejší na vyhodnocení. To je spíš teoretická výhoda – i komplikovaný selektor bude pořád hodně rychlý.

To je hodně odvážné tvrzení.

Když už jde o rychlost, tak by stálo za to doporučit selektor dětí, místo selektoru potomků (tj. „a > b“ místo „a b“).

Jaroslav Bereza

Ještě mě napadlo, že barvy lze občas zapisovat také pomocí tří znaků

#fff místo #ffffff
#f00 místo #ff0000

Je to rychlejší, přehlednější a spíše se v tom neudělá chyba :-)

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.