@rules w CSS. Czy znasz je wszystkie?

Specyficzne reguły CSS, tzw. at-rules, to nic innego jak specjalne wyrażenia w CSS, które zaczynają się od małpki, czyli znaku @. Zbierzmy je dziś do kupy i przypomnijmy sobie, że w ogóle istnieją i do czego służą.

Regularne reguły (regular rules)

czyli takie, których składnia wygląda następująco:

@[KEYWORD] (RULE);

@charset

• określa sposób kodowania znaków w danym pliku CSS
• regułę należy umieścić na samym początku pliku
• uwaga – sposób kodowania znaków umieszczony w nagłówku HTTP nadpisze regułę  @charset !

Przykład:

@charset "UTF-8";

@import

• pozwala na zaimportowanie do pliku innego pliku CSS
• regułę należy umieścić na samym początku pliku, po ewentualnej regule @charset
• opcjonalnie możesz określić warunki importu pliku, dla jakich urządzeń ma być on dołączony
• uwaga – import pliku za pomocą tej reguły to osobne żądanie HTTP
• preprocesory CSS też posiadają swoją regułę @import, jednak tam działa ona inaczej – importuje wskazany kod nie wysyłając dodatkowego żądania HTTP

Przykład:

@import url("external.css") print, tv; 
@import "otherExternal.css" screen and (orientation: landscape);

@namespace

• korzystamy wtedy, kiedy chcemy nadać style CSS dokumentowi XML lub XHTML
• reguła musi występować po deklaracjach @charset oraz @import, ale przed resztą innych reguł specyficznych oraz stylów

Przykład:

/* Przestrzeń nazw dla XHTML */ 
@namespace url(https://www.w3.org/1999/xhtml); 

/* Przestrzeń nazw dla SVG */ 
@namespace svg url(https://www.w3.org/2000/svg);
/* style dla wszystkich elementów XHTML <a>, XHTML jest domyślną przestrzenią nazw */
a {}

/* style dla elementów SVG <a> */
svg|a {}

/* style dla elementów XHTML oraz SVG <a> */
*|a {}

Zagnieżdżone reguły (nested rules)

czyli takie, których składnia wygląda następująco:

@[KEYWORD] { /* Nested Statements */ }

@counter-style

• definiuje style customowego punktora – taka magia!
• słabiutkie wsparcie, ledwie cokolwiek na firefoxie, póki co…

Przykład:

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

ul {
  list-style: thumbs;
}

@document

• reguła wyszczególnia style, które nadawane są stronom spełniającym określone w regule warunki
• warunki bazują na adresie URL
• brzmi super, ale uważajcie na wsparcie, które jest lekko mówiąc nikłe – cóż, @document to nadal technologia eksperymentalna

Przykład:

@document 
/* Reguła dla konkretnej strony */ 
url(https://ach-te-internety.pl/), 

/* Reguła dla strony, której URL zaczyna się od... */ 
url-prefix(https://ach-te-internety.pl/category/css/), 

/* Reguła dla konkretnej domeny */ 
domain(ach-te-internety.pl), 

/* Reguła dla stron spełniających warunek regexpa */ 
regexp("https:.*") 

{  
  body { 
    font-family: Comic Sans; 
  } 
}

@font-face

• pozwala na zdefiniowanie nowej czcionki
• nadajemy jej nazwę (którą potem wpisujemy jako wartość  font-family) oraz określamy jej źródło

Przykład:

@font-face { 
    font-family: fancy_font;
    src: url('fancy_path/font.ttf'); 
    font-weight: bold;
}

Jeśli jesteście szczególnie zainteresowani tematem @font-face – przeczytajcie ten artykuł od grafmag.pl.

@font-feature-values

• ta reguła współpracuje z własnością font-variant-alternates, która służy do podmieniania znaków, dekorowania ich, dodawania zawijasów
• korzysta z dodatkowych reguł  @swash,   @ornaments,   @annotation,   @stylistic,   @styleset,  @character-variant, które nadają charakterystyczne cechy adekwatnie do funkcji dostępnych w font-variant-alternates
• wspierane tylko w Firefoxie i Safari – czyżby dlatego mało kto (eee… ktokolwiek?) z tego korzysta?

Przykład:

@font-feature-values Jupiter Sans {
  @swash {
    delicate: 1;
    flowing: 2;
  }
}

h2 { font-family: Jupiter Sans, sans-serif; }


/* pokaż drugi wariant zawijasów */
h2:first-letter { font-variant-alternates: swash(flowing); }

<h2>Quick</h2>

@keyframes

• według mnie najbardziej niedoceniana reguła wszechświatów
• pozwala na tworzenie animacji

Przykład:

@keyframes cool_animation { 
  0% {background-color: white;} 
  100% {background-color: black;} 
} 

div { 
  animation: cool_animation 12s infinite; 
}

@media

• chyba najpopularniejsza reguła internetów
• umożliwia nadanie różnych stylów dla różnych mediów, w zależności od warunków (tzw. media queries) dotyczących rodzaju urządzenia oraz szerokości ekranu
• warto kliknąć TUTAJ, aby poznać wszystkie możliwości tworzenia media queries

Przykład:

@media handheld and (min-width: 500px) and (max-width: 700px) { 
 ...
}
/* reguła nadana dla urządzeń przenośnych o szerokości ekranu z przedziału 500px - 700px */

Dosyć często reguła jest wykorzystywana do stylowania stron w wersji do druku

@media print { 
...
}

@page

• reguła definiuje style dla całego wydruku, jak i dla konkretnych stron w wersji do druku
• tutaj skorzystamy z takich pseudoselektorów jak :first, :blank,  :left, :right, :recto, :verso, o których przeczytasz w innym moim artykule Czy znasz te pseudoselektory CSS?
• za pomocą pseudoselektorów możesz zmienić tylko określone właściwości CSS! Które? Tego też dowiesz się w moim artykule KLIK!

Przykład:

@page :first { 
    margin: 15px; 
}

Reguła posiada swoje deskryptory, które określają charakterystyczne cechy wydruku:

• size – określa rozmiar wydruku, opcjonalnie też orientację (portrait lub landscape)

@page { 
    size: A4;
}

• marks – określa występowanie znaczników przycięcia i ich rodzaju

@page { 
    marks: crop cross;
}

• bleed – określa wielkość strefy spadu

@page { 
    bleed: 7pt;
}

W regule @page możemy też skorzystać z 16 innych reguł specyficznych:

• @top-left-corner
• @top-left
• @top-center
• @top-right
• @top-right-corner
• @right-top
• @right-middle
• @right-bottom
• @bottom-right-corner
• @bottom-right
• @bottom-center
• @bottom-left
• @bottom-left-corner
• @left-bottom
• @left-middle
• @left-top

Dzięki nim możemy umieścić coś w marginesie strony, w miejscu określonym przez nazwę każdej z reguły. Oczywiście to wciąż technologia eksperymentalna, ale dobrze jest być jej świadomym.

Kopalnię informacji o @page znajdziecie TUTAJ.

@supports

• reguła sprawdza, czy przeglądarka wspiera określoną technologię; jeśli tak jest – nadaje specjalne style
• sprawdzany warunek nazywa się zgrabnie feature query
• wsparcie na IE – żadne w chwili pisania posta

Przykład:

@supports (display: flex) { 
  .module { 
    display: flex; 
  } 
} 

@supports not (display: flex) {
  div {
    float: right;
  }
}

@viewport

• reguła ustala różne ustawienia dla widoków na mobilnych urządzeniach, np.: zoom, czy orientację
• dokładniej możemy ustawić takie bajery jak: (max/min) szerokość ekranu, (max/min) wysokość ekranu, (max/min) zoom, zoom dostępny dla użytkownika, orientację
• technologia eksperymentalna, także uważajcie na wsparcie
• reguła powstała, aby zastąpić tag <meta>

Przykład:

@viewport {
    width: device-width;
    zoom: 1;
    min-zoom: 0.5;
    max-zoom: 3;
    user-zoom: fixed;
}

To tyle w temacie podstawowej wiedzy o małpich regułach w CSS. Jeśli szukasz więcej informacji z tej dziedziny, polecam Wam kliknąć TUTAJ.