PC-politika.cz - Novinky: CSS: nehezké kódy, brrr! PC-politika

CSS: nehezké kódy, brrr!

Často, především u začátečnických zdrojových kódů, se vyskytuje spousta tagů/značek/prvků  . Tedy autor takto odděluje text na nový řádek a zabírá zbytečně moc místa. Při větším počtu těchto tagů může docházet i ke zpomalování načítání www stránky. Nejčastěji se tento způsob vyskytuje při oddělování odkazů, které mají být pod sebou, tedy každý na novém řádku. Místo neustálého přidávání tagu to lze provést exelentněji pomocí CSS vlastnisti: display:block. Podívcejte se, jak je to jednoduché.

Jak to tedy většinou někteří z nás dělají? Odkazy, řazeny za sebou, pomocí tagu/kotvy <a>, se logicky řadí na jeden řádek, jelikož jde o tak řádkový! Bez jakékoli úpravy takové odkazy pak mají např. tento kód:

Odkazy v řádkovém tagu `<a>`

//Odkazy v řádkovém tagu <a>
<div class="odkaz">
<a href="http://www.pc-politika.cz/news-2269-phpf-vyuziti-zkratky-pro-obrazky.html">Využijte zkratky</a>
<a href="http://www.pc-politika.cz/news-2267-kritika-webu-talkfusion-com-prodej-video-komunikace.html">Prodej video komunikace</a>
<a href="http://www.pc-politika.cz/news-2266-video-redesign-youtube-podivejte-se.html">Redesign YouTube</a>
</div>

Odkazy v klasickém řádkovém tagu <a>

Odkazy odřádkovány pomocí ` `

Když mají být na stránce umístěny pod sebou odkazy, prostě je ručně „odřádkují“ pomocí tzv. řádkového zlomu, což je tag  . Takový zdrojový kód potom obsahuje tohle:

//Odkazy v řádkovém tagu odřádkovany pomocí tagu <br>
<div class="odkaz">
<a href="http://www.pc-politika.cz/news-2269-phpf-vyuziti-zkratky-pro-obrazky.html">Využijte zkratky</a><br>
<a href="http://www.pc-politika.cz/news-2267-kritika-webu-talkfusion-com-prodej-video-komunikace.html">Prodej video komunikace</a><br>
<a href="http://www.pc-politika.cz/news-2266-video-redesign-youtube-podivejte-se.html">Redesign YouTube</a>>br>
</div>

Odkazy v klasickém řádkovém tagu <a>, odřádkovany pomocí br

Odkazy v klasickém řádkovém tagu <a> byly odřádkovány pomocí tagu

Jednodušeji to provedeme pomocí CSS!

Nyní na předcházející, kostrbatý a zastaralý postup rychle zapomňte!! Ukážeme si, jak rychle, jednoduše, a tedy excelentně přinutit odkazy, aby se i v řadkovém tagu <a> řadily pekně pod sebe. Prostě, stačí do CSS stylu přidat vlastnost: display: block. Jinými slovy, uděláme tím z řádkového tagu <a> blokový tag.

//Kompletní kód, který pomocí CSS seřadí odkazy v řádkovém tagu  <a>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Nehezké kódy brr! Uprava pomocí CSS</title>
  <style>
.odkaz a {display: block}
</style>
</head>
<body>
 
<div class="odkaz">
<a href="http://www.pc-politika.cz/news-2269-phpf-vyuziti-zkratky-pro-obrazky.html">Využijte zkratky</a>
<a href="http://www.pc-politika.cz/news-2267-kritika-webu-talkfusion-com-prodej-video-komunikace.html">Prodej video komunikace</a>
<a href="http://www.pc-politika.cz/news-2266-video-redesign-youtube-podivejte-se.html">Redesign YouTube</a>
</div>
</body>
</html>

Ukázkový kód, který by měl fungovat ve všech prohlížečích, si můžete prohlédnout zde: nehezke kody_br.html

Resumé

Použití CSS, vlastnost display:block při práci s odkazy a nejen v tomto případě, je rozhodně mnohem lepší, než klasické vkládání odřadkování. Proto shora uvedený způsob s tagy nepoužívejte. Samozřejmě, pokud to pro vás není žádná novinka, tím lépe!

Autor: Květoslav (Kvido) Vícha
Zdroj: Vlastní + w3schools.com/display
Home Page

Související články v kategorii:

· CSS: nehezké kódy, brrr!
· CSS: Validace věc ošidná [5]; error 500
· CSS: Menu s pohybujícími titulky
· CSS: Validace věc ošidná, atribut id [4]
· CSS: Weby jdou donaha vždy 9. dubna!
· CSS: Validita věc ošidná - Opera 9xx [3]
· CSS: Selektory v CSS 3
· CSS: Validita věc ošidná! [2]
· CSS: Pro barvy stačí tři číslice RGB kódu
· CSS: Vzhled pro IE, sémantický kód oddělit
· CSS: Typy médií
· CSS: Validita věc ošidná! [1]

Komentáře

ArnieX	Dne 28.11.2011 03:25 #1
Napomenutí: Komentáře: 38 Level uživatele: Administrátor	Naprosto nesouhlasím, tag <br> je naprosto OK a rozhodně nedokáže při jeho nepoužívání spasit kód jsou jiné věci, které by se neměli používat ale <br> je rozhodně OK. Nemám teď sice čas otestovat ale opravdu to s tím display:block; funguje? Navíc nahoře máš v popisku napsáno display:inline-block; a dole píšeš použití display:block; je to zavádějící. Navíc ve tvém příkladu musíš vypsat <div class="odkaz"></div> což je 25 znaků a 2x <br> je jen 8 což je podle mě sakra velkej rozdíl a další je, že styl se musí přečíst z CSS či <style></style> a to je o pár ms delší na interpretaci obsahu než "simply clever" <br> tag, který jasně a zřetelně parseru napoví co dělat. Podle mě je tento článek fajn ale uplný nesmysl, začíná mít možná smysl v případě že potřebuješ takto odřádkovat 1000 odkazů ale i tak o tom pochybuju a další věc je - funguje to opravdu bezvadně ve všech prohlížečích? Nejsem si tím jist, zatímco <br> ano a bez problémů. Někdy není nejlepší udělat to nejlepší.
Kvetos	Dne 28.11.2011 08:28 #2
Napomenutí: Komentáře: 262 Level uživatele: Hlavní Administrátor	1/ display:inline-block;.... má být display:block....to byl překlep. 2/Zda funguje, dám ukázku souboru s použitím display:block do článku... 3/ale CSS styl dáš jednou provždy do externího souboru. Takže ten pak na konkrétní stránce místo nezabírá. 4/Asi nefunguje ve všech prohlížečích ještě. Musím zjistit. Dík za připomínky, je to tedy na uváženou a nbeměl bych to vydávat jako nejlepší způsob. <br> bylo, je a bude. Hm.
ArnieX	Dne 28.11.2011 11:15 #3
Napomenutí: Komentáře: 38 Level uživatele: Administrátor	Přesně tak navíc jak jsem popsal do HTML přijde to <div class="odkaz"></div> vždy když tím obalíš odkazy a to je u 3 odkazů rozhodně delší zápis než 2x BR jinak proti tomu nic nemám ale nazývat to, že zejména u začátečnických webů se najde spousta <br> tagů tj. na pováženou mě náhodou <br> občas zachrání život, často ani není jiná možnost jak některé věci oddělit a kdybych chtěl <br> uplně nahradit tak by to vždycky vypadalo minimálně jako <div class="br"></div> a abych tento zápis dal všude na místo <br> by byl už kompletní nesmysl jestli se chceš ale zaměřit na něco zajímavého napiš článek o microdatech tj. velice zajímavá část HTML5 ale né zrovna často využívaná, přitom je to silný nástroj jak nakopat prdel konkurenci. Jinak minifikaci CSS/HTML/JS jsem se také hodně věnoval a dostal jsem se na solidní výsledky a rychlosti načtení a zpracování stránky. Velice často se tak vecházím do 1s ale většinu času se jedná o časy mezi 100ms a 600ms což si myslím je naprosto luxusní, zatímco některé weby loadují i 10s. Jinak předpokládám, že jsi na toto <br> narazil právě z jednoho důvodu a to je cca tohle: <div>OBSAH1</div> <br> <br> <br> <br> <br> <br> <div>OBSAH2</div> Tohle je samozřejmě nesmysl a proto jsi podle mě psal tento článek, u pár odkazů opravdu nemá smysl <br> nahrazovat ale v tomto případě stačí něco ve smyslu: <div style="width:200px; height: 200px;">OBSAH1</div> <div style="width:200px; height: 200px; margin-top:50px;">OBSAH2</div> kde samozřejmě obsah style je v CSS asi takto: .classobsahu1,.classobsahu2 {width:200px; height:200px;} .classobsahu2 {margin-top:50px;} což si myslím je elegantnější řešení než <br> desetkrát pod sebou v tuto chvíli slova o začátečnících a spoustě BR má svou váhu. Mrkni na ta microdata a zkus si o nich něco přečíst a napiš něco zajímavého HOWG
Kvetos	Dne 28.11.2011 12:24 #4
Napomenutí: Komentáře: 262 Level uživatele: Hlavní Administrátor	Přesně! Byla to ta <br> pod sebou. JJ, o to mi šlo. Dík za inspiraci na mikrodata se podívám.
Kvetos	Dne 28.11.2011 19:04 #5
Napomenutí: Komentáře: 262 Level uživatele: Hlavní Administrátor	Vložil jsem ukázkový soubor - nehezke_kody_brr.html.