Kaskádové styly – pokračování

přímo ve stylu:

připojení několika různých stylů:

stránka by měla mít připojený minimálně speciální styl pro tisk, který při tisku skryje navigaci a další „zbytečnosti“

„media queries“ – umožňují jednu a tutéž stránku inteligentně zobrazit na různých koncových zařízeních

styly se použijí selektivně na základě podmínek testujících např. rozlišení obrazovky, orientaci displeje, barevnou hloubku

podle dostupné velikosti obrazovky můžeme měnit layout stránky, zobrazovat/skrývat její části, …

media queries jsou základním prostředkem pro realizaci responzivního designu

podmíněně lze načíst celý styl:

<link rel="stylesheet" href="velkaobrazovka.css" media="screen and (min-width: 1200px)">
<link rel="stylesheet" href="smartphone.css" media="screen and (max-device-width: 480px)">

případně můžeme mít jen podmíněné sekce uvnitř jednoho stylu:

@media screen and (min-width: 500px) and (max-width: 1200px) {
  …pravidla…
  }

@media screen and (min-width: 1200px) {
  …pravidla…
  }

@media screen and (max-width: 500px) {
  …pravidla…
  }

ukázka

CSS nabízejí prostředky pro definici a stažení písma do prohlížeče

prohlížeče podporují různé formáty písem

v poslední době konečně došlo ke shodě na jednom formátu WOFF (Web Open Font Format)

existují různé služby pro snadné zařazení písma v mnoha formátech – http://www.fontsquirrel.com/, http://www.google.com/webfonts

licence některých písem neumožňuje použití přímo na webu

pozor na podporu českých znaků

pozor na některých mobilních zařízení („bílá stránka“ než se načte písmo)

jakýkoliv objekt je možné libovolně 2D transformovat (posunutí, otočení, skosení, zvětšení/zmenšení)

lze aplikovat několik transformací najednou

vlastnosti CSS lze jednoduše nechat přejít do jiné hodnoty a tím vytvořit dojem animace

měnit lze několik vlastností najednou

lze ovládat rychlost a tempo přechodu

podporováno jen na některých vlastnostech

podpora se postupně rozšiřuje, ve starších prohlížečích je potřeba používat „vendor prefixy“

h1:hover { color: blue;
           font-size: 400px;
           background-color: yellow; 
           transition: color 10s linear,
                       font-size 10s linear,
                       background-color 10s linear; }

méně náročné na zdroje než animace vytvářené pomocí JavaScriptu

složitější průběh změn vlastností lze popsat pomocí pravidla @keyframes a vlastností animation-*

@keyframes enlarge-and-rotate {
  from {
    font-size: 4px;
  }

  20% {
    transform: rotate(0deg)
    }

  80% {
    transform: rotate(720deg)
    }

  to {
    font-size: 400px;
    transform: rotate(720deg)
    }
  }

h1 {
  font-size: 4px;
  animation-name: enlarge-and-rotate;
  animation-duration: 8s; 
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

prohlížeče stále nenabízejí uspokojivé možnosti tisku

vydavatelé touží po jednom formátu, který půjde publikovat na webu, tisknout a použít pro e-knihy

nastavení okrajů na stránce; zvlášť pro liché, sudé a první

řízení stránkového zlomu

kontrola vdov a sirotků

číslování stránek

doplnění čísel stránek (obsah)

záložky

pseudoselektory before a after, vlastnost content

p.note:before { content: "Note: " }

automatické číslování

h1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
    counter-reset: section;      /* Set section to 0 */
}
h2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

možnosti se postupně rozšiřují a středně složité publikace je již je možné generovat PDF v tiskové kvalitě přímo z HTML+CSS

obtékáním (float)

pozicováním (position)

tabulkový layout

flexbox

grid

pro profesionální použití některé věci CSS neumí

lze řešit pomocí preprocesorů CSS

Martin Michálek: CSS – moderní layout

Martin Michálek: Vzhůru do (responzivního) webdesignu