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

4IZ268 – Webové technologie

Jirka Kosek

Poslední modifikace: $Date: 2016/10/07 07:51:53 $

Podpora různých zařízení

Podopora několika výstupních médií

  • přímo ve stylu:


  @media print {
    BODY { font-size: 10pt }
  }
  @media screen {
    BODY { font-size: 12pt }
  }
  @media screen, print {
    BODY { line-height: 1.2 }
  }
  • připojení několika různých stylů:

<link rel="stylesheet" type="text/css" href="zaklad.css" media="all">
<link rel="stylesheet" type="text/css" href="online.css" media="screen">
<link rel="stylesheet" type="text/css" href="tisk.css" media="print">
  • 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“

Přizpůsobení stylu na základě parametrů koncového zařízení

  • „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

Ukázka media queries

  • 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

Písmo na webu

Uživatelem definovaná písma

Vložení písma prakticky

Příklad 1. Definice a použití nového písma v CSS
@font-face
{ 
  font-family: Baskerville;
  src: url(http://example.com/fonts/baskerville.woff);
}

h1 { font-family: Baskerville, serif; }
Příklad 2. Vložení písma pomocí „fontové“ služby
<link href='https://fonts.googleapis.com/css?family=Titillium+Web&subset=latin,latin-ext'
      rel='stylesheet' type='text/css'>

<style>
h1 { font-family: 'Titillium Web', sans-serif; }
</style>

Animace, transformace a přechody

Transformace

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

  • lze aplikovat několik transformací najednou

  • prohlížeče zatím většinou implementují jen verzi s „vendor prefixem“

h1 { color: red;
     -o-transform: rotate(30deg) translateY(200px);
     -webkit-transform: rotate(30deg) translateY(200px);
     -ms-transform: rotate(30deg) translateY(200px);
     -moz-transform: rotate(30deg) translateY(200px);
     transform: rotate(30deg) translateY(200px); }

Přechody

  • 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

Animace

  • 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;
    }

Stránkovaná média

HTML+CSS nejen na webu

  • 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

Stránkovaný výstup

  • 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

h2, h3, h4 { pabe-break-after: avoid; }
h1 { page-break-before: always; 
thead, tr { page-break-inside: avoid; }

Generování obsahu, automatické číslování

  • 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;
    }

Využití v praxi

Layout a pozicování

Jak lze v CSS rozmístit prvky na stránce

  • obtékáním (float)

  • pozicováním (position)

  • tabulkový layout

  • flexbox

  • grid

Pokročilá témata

CSS preprocesory

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

    • proměnné pro snadné modifikace hodnot, které se vyskytují na více místech stylu (např. použité barevné schéma)

    • ošetření prefixovaných/neprefixovaných vlastností

    • výpočty

  • lze řešit pomocí preprocesorů CSS

Povinná četba