at rules

@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:

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.

Artykuły, które mogą Ci się spodobać...

Wpisz hasło, którego szukasz i naciśnij ENTER, aby je wyszukać. Naciśnij ESC, aby anulować.

Dawaj na górę