8. fejezet¶

CSS nesting¶

Modern böngészők esetében lehetőségünk van CSS nesting-et használni, azaz egyes stílusokat másik stílusokba ágyazni, ezzel javítva a CSS kódjaink átláthatóságát.

Előnyök:

Átláthatóság: A kód szerkezete jobban tükrözi az oldal HTML-struktúráját, így könnyebb értelmezni és módosítani.
Rövidebb kód: Kevesebb ismétlés, így tömörebbé válik a stíluslap.
Karbantarthatóság: Könnyebb a kapcsolódó stílusokat együtt kezelni és módosítani.

Példa: hagyományos CSS kód

.navbar {
  background-color: #333;
  color: white;
}

.navbar ul {
  list-style: none;
  padding: 0;
}

.navbar ul li {
  display: inline-block;
  margin-right: 10px;
}

.navbar ul li a {
  color: white;
  text-decoration: none;
}

Példa: ugyanez nesting-et használva

.navbar {
  background-color: #333;
  color: white;

  ul {
    list-style: none;
    padding: 0;

    li {
      display: inline-block;
      margin-right: 10px;

      a {
        color: white;
        text-decoration: none;
      }
    }
  }
}

Note

A CSS nesting egy modern funkció, így sok böngésző nem, vagy csak korlátozottan támogatja.

Media query-k¶

A webfejlesztés során felmerülhet az igény arra, hogy néhány CSS formázást csak bizonyos médiatípusok és paraméterek esetén végezzünk el. Erre egy tipikus példa, amikor különféle eszközökre és felbontásokra szeretnénk optimalizálni a weboldalunk megjelenését.

A CSS3 media query-k segítségével lehetőségünk van olyan CSS formázásokat megadni, amelyek csak bizonyos feltételek teljesülése esetén lesznek érvényesek. A media query-k szintaxisa:

@media not|only mediatype and (mediafeature) {
  /* CSS utasítások... */
}

A mediatype azt a médiatípust jelöli, amire elvégezzük a formázást. Lehetséges értékei: screen (számítógépek, tabletek, okostelefonok stb. képernyője), print (nyomtató), speech (felolvasóprogram), all (minden médiatípus).
A mediafeature helyén adjuk meg a feltételt, ami mellett elvégezzük a formázást.
A not kulcsszó az egész media query jelentését negálja.
Az only kulcsszó a régi, CSS3 media query-ket nem ismerő böngészőknél nem végzi el a formázást. Használatának a modern böngészőkben nincs hatása.
Az and kulcsszó összeköti a feltételt (mediafeature) a médiatípussal (mediatype) és/vagy további feltételekkel.
A not, only és and kulcsszavak használata opcionális. Ugyanakkor ha a not vagy only kulcsszavakat használjuk, akkor kötelezően meg kell adni a médiatípust is!

Néhány gyakran használt media feature: * min-width és max-width: a képernyő szélességének határait szabályozzák. * min-height és max-height: a képernyő magasságának határait szabályozzák. * orientation: a képernyő tájolása (portrait vagy landscape). * aspect-ratio: a képernyő képaránya. * resolution: a képernyő felbontása (dpi vagy dppx).

Példa: Egy media query, amely a 952 pixelnél nem szélesebb képernyők esetén megszünteti a kép úsztatását, és középre igazítja a képet. A böngészőablak szélességének megváltoztatásával látható a media query hatása. (A kód kimenete megtekinthető itt)

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Media query-k</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <style>
      img { 
        float: left; 
        margin-right: 10px; 
      }

      @media only screen and (max-width: 952px) { 
        img {
          float: none;
          display: block;
          margin: 0 auto;
        }
      }
    </style>
  </head>
  <body>
    <img src="https://placekitten.com/200/200" alt="Macska"/>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut luctus nisl, ut laoreet odio. Quisque scelerisque accumsan nisi, eu fringilla orci dictum eget. Duis est sapien, consectetur et ipsum in, euismod mattis felis. Maecenas auctor convallis nibh eget ornare. Mauris fringilla eros in ante venenatis congue. Praesent egestas accumsan quam, non tincidunt massa euismod nec. Aliquam ac pharetra urna. Donec efficitur nisi at erat iaculis egestas. Fusce vel risus et mi efficitur posuere non eu diam. Donec vehicula ullamcorper ipsum a tempor. Pellentesque semper erat tempus mattis volutpat. Quisque nec fermentum ligula. Integer tincidunt tellus sed pretium gravida. Cras facilisis est quam, eu rutrum turpis hendrerit quis. Sed finibus volutpat nisi, sed ultricies eros porttitor eget. Donec urna ligula, condimentum et est vitae, vestibulum tincidunt orci. Maecenas pulvinar massa a magna feugiat luctus eu non urna.</p>
  </body>
</html>

Reszponzív design¶

A reszponzív design (responsive design) olyan webdesign megközelítés, amelynek célja, hogy a weboldalak különböző eszközökön és képernyőméreteken (asztali gépek, laptopok, tabletek, okostelefonok stb.) is optimális felhasználói élményt nyújtsanak. Ez azt jelenti, hogy a weboldal tartalma, elrendezése és funkciói automatikusan igazodnak a képernyő méretéhez és tájolásához, biztosítva ezzel a könnyű olvashatóságot és navigációt.

A CSS media query-k kulcsszerepet játszanak a reszponzív design megvalósításában. Segítségükkel különböző CSS stílusokat alkalmazhatunk, amelyek csak bizonyos eszközökön vagy feltételek mellett lépnek életbe. Íme néhány gyakori példa a CSS media query-k használatára:

Példa: A lenti példa különböző stílusokat alkalmaz különböző képernyőméretek esetén. Kis méretű képernyőkön kevesebb margin és padding használatos a helytakarékosság érdekében.)

@media only screen and (max-width: 600px) {
    body {
        font-size: 14px;
        padding: 10px;
    }
}

Nyomtatási stíluslap¶

A CSS media query-k segítségével nyomtatási stíluslapot is készíthetünk egy weboldalhoz. A @media print utasítással olyan formázásokat adhatunk meg, amelyek csak nyomtatás esetén lesznek érvényesek.

Néhány fontosabb javaslat, lehetőség nyomtatási stíluslapok használata esetén:

A hosszúsággal kapcsolatos értékek megadására érdemes a pt (pont) mértékegységet használni, ugyanis ez kifejezetten nyomtatásra lett kitalálva.
A page-break-before, page-break-after és page-break-inside tulajdonságokkal szabályozhatjuk az oldaltöréseket.
A @page direktíva segítségével beállíthatjuk a nyomtatási margókat.

Példa: Egy egyszerű nyomtatási stíluslap

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Nyomtatási stíluslap példa</title>
    <meta charset="UTF-8"/>
    <style>
      /* A weboldal nyomtatásakor érvényes formázások */

      @media print {  
        p { font-size: 12pt; }            /* bekezdések betűméretének megadása */
        video, audio { display: none; }   /* videók, hangfájlok eltüntetése */
        h1, h2, h3 { page-break-after: avoid; } /* címsorok utáni oldaltörés elkerülése */
      }

      @page { margin: 0.5cm; }  /* nyomtatási margók megadása minden oldalra */
    </style>
  </head>
  <body>
    <!-- A weboldal tartalma -->
  </body>
</html>

Utolsó frissítés: 2024-08-16 17:08:00