Níže uvedné témata jsou spíše průřezem, pořadí je víceméně náhodné.
Ukázková tabulka
<table class="countries">
<thead>
<tr>
<th class="country">Stát</th>
<th class="area">Rozloha (km<sup>2</sup>)</th>
<th class="population">Počet obyvatel</th>
</tr>
</thead>
<tbody>
<tr>
<td>Česko</td>
<td>78 866</td>
<td>10 513 834</td>
</tr>
<tr>
<td>Slovensko</td>
<td>49 035</td>
<td>5 412 008</td>
</tr>
<tr>
<td>Polsko</td>
<td>312 685</td>
<td>38 533 789</td>
</tr>
<tr>
<td>Německo</td>
<td>357 021</td>
<td>81 993 000</td>
</tr>
<tr>
<td>Rakousko</td>
<td>83 858</td>
<td>8 488 511</td>
</tr>
</tbody>
</table>
Rámečky v tabulce
border-collapse
Obarvení řádků i sloupců
- pseudotřída
:nth-child
Zarovnání blokových prvků na střed
- vhodné pro tabulky, obrázky, apod.
margin: 0 auto;
Vendor-prefixy
- nové vlastnosti (dosud nestandardizované apod.)
- vlastnosti specifické pro prohlížeč
- příklad - počet sloupců
- standard CSS:
column-count - Firefox do verze 52 nepodporoval, ale uměl skrz
-moz-column-count
- standard CSS:
- vhodné použít preprocesor CSS, abychom nemuseli vypisovat ručně
- Web Can I use... Browser support tables for modern web technologies
Zaoblené rohy
border-radius- jde využít i netradičně:
<p class="face"> <img src="https://www.gravatar.com/avatar/167c7ea339c46bc1755fad53e8636fdd?s=160" width="160" height="160" alt="Avatar" /> </p>
P.face IMG {
border-radius: 50%;
}
Pseudotřídy :before a :after
A:after {
content: " (" attr(href) ")";
}
Výstupní formáty (media)
- speciální CSS pro obrazovku, televizi, telefon či tisk
- dnes dává největší smysl
- pravidla pro tisk (méně barev, bez navigace apod.)
- pravidla podle vlastnosti obrazovky (velikost, počet barev, rozlišení)
/* Pravidla pro vsechna media. */
@media print {
/* Pravidla pouze pro tisk (prepisi vyse uvedena). */
}
@media screen {
/* Pouze obrazovka (dnes monitory, telefony, tablety, ...). */
}
Media-queries
- doplnění o vlastnosti zařízení
@media screen and (min-width: 800px) {
/* Pro prohlížeče, kde okno má alespoň 800px */
}
- vlastnosti:
-
max-width: šířka okna (resp. obrazovky) je nejvýše zadaná hodnota -
min-width: šířka okna (resp. obrazovky) je alespoň zadaná hodnota -
min-height,max-height: podobně pro výšku -
min-device-width(s spol.): velikost zařízení jako takového - pro klasické počítače vlastně rozměr okna při celoobrazovkém režimu
-
orientation:landscapeaportrait
-
- vytváření tzv. responzivního designu
- rozmístění prvků, velikost písma apod přizpůsobíme zařízení podle jeho vlastností
- lze i zneužít:
@media screen and (max-width: 700px) { BODY { color: #444; } }
@media screen and (max-width: 650px) { BODY { color: #555; } }
@media screen and (max-width: 600px) { BODY { color: #666; } }
@media screen and (max-width: 550px) { BODY { color: #777; } }
@media screen and (max-width: 500px) { BODY { color: #888; } }
@media screen and (max-width: 450px) { BODY { color: #999; } }
@media screen and (max-width: 400px) { BODY { color: #AAA; } }
@media screen and (max-width: 350px) { BODY { color: #BBB; } }
@media screen and (max-width: 300px) { BODY { color: #CCC; } }
@media screen and (max-width: 250px) { BODY { color: #DDD; } }
@media screen and (max-width: 200px) { BODY { color: #EEE; } }
Nevýhody CSS
- podpora v prohlížečích (vendor prefixy)
- organizace kódu
- plochá struktura
- opakující se části kódu
- opakující se hodnoty (např. barevné schéma)
- řešení: preprocesory
- vezmou rozšířené CSS a převedou ho na standardní
- tj. píšeme efektivněji (kratší kód apod.), ale prohlížeč dostane klasický CSS kód
- někdy později se podíváme na Sass
