Specyficzne reguły CSS

W jednej z poprzednich części kursu CSS poznaliśmy sposoby zapisywania reguł CSS. Jednak nie są to wszystkie sposoby zapisywania reguł CSS, jakie występują w języku CSS, ponieważ do naszej dyspozycji są jeszcze specyficzne reguły CSS (tzw. at-rules), które poznamy w tej oraz w następnych częściach tego kursu CSS.

Specyficzne reguły CSS różnią się od pozostałych reguł, jakie do tej pory poznaliśmy, formą zapisu oraz przeznaczeniem danej reguły CSS.

@charset

@charset - za pomocą tej specyficznej reguły CSS możemy zadeklarować sposób kodowania znaków w danym pliku CSS.

Jeżeli chcemy dodać regułę @charset do pliku CSS, to musimy umieścić ją jako pierwszą regułę w danym pliku CSS, tak jak w przykładowym zapisie, który został zaprezentowany poniżej:

/* Pierwsza reguła */
@charset "UTF-8";

/* Kolejne reguły */
div:before {
  content:'Dodatkowa Zawartość';
}

Dzięki zapisowi @charset "UTF-8" wszystkie znaki, jakie pojawiają się w naszym pliku CSS, będą kodowane w standardzie UTF-8, czyli nie będziemy mieć ewentualnych problemów z polskimi znakami (ą,ę,ć itp.).

Reguła @charset "UTF-8" przydaje się, np. w momencie gdy chcemy dodać jakieś dodatkowe znaki (które są kodowane w standardzie UTF-8, np. polskie znaki) do początkowej lub końcowej zawartości elementu HTML, za pomocą właściwości content, a nasz plik HTML został zakodowany w formacie ANSI, a nie UTF-8.

Oczywiście to jaki standard kodowania znaków podamy pomiędzy cudzysłowem w regule @charset zależy od nas samych.

@media

@media - za pomocą tej specyficznej reguły CSS możemy określić style wyglądu dla danych elementów HTML, jednak style te zostaną dodane do naszej strony internetowej tylko w określonych okolicznościach, np. gdy nasza strona zostanie wyświetlona w urządzeniu przenośnym, albo gdy szerokość okna przeglądarki internetowej użytkownika będzie wynosiła określoną szerokość lub inną cechę.

Przykładowa reguła @media została przedstawiona poniżej:

@media all and (max-width:800px) {
  div {
    background-color:red;
  }
}

Reguła @media all and (max-width:800px) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy nasza strona internetowa zostanie wyświetlona w oknie przeglądarki internetowej o wartości szerokości nie większej niż 800 pikseli (max-width:800px), ponadto reguła ta ma tyczyć się wszystkich urządzeń (all).

Więcej o regule @media powiemy sobie w następnej części tego kursu CSS.

@import

@import - za pomocą tej specyficznej reguły CSS możemy dołączyć do pliku CSS kolejny plik CSS z różnymi regułami CSS. Przy tworzeniu reguły @import możemy (lecz nie musimy) określić w jakiej sytuacji ma być dołączony dany plik CSS (dla jakiego typu mediów ma być on dołączony, czyli dla jakiego typu urządzenia).

Jeżeli chcemy dodać regułę @import do pliku CSS, to musimy umieścić ją jako pierwszą regułę w danym pliku CSS, pod ewentualną regułą @charset, tak jak w przykładowym zapisie, który został zaprezentowany poniżej:

/* Pierwsze reguły */
@charset "UTF-8";
@import url("dodatkowy.css") print, tv;

/* Kolejne reguły */
div {
  color:#000;
}

p {
  padding:5px;
}

Reguła @import url("dodatkowy.css") print, tv; mówi przeglądarce internetowej, że plik CSS o nazwie "dodatkowy" ma być dołączony do danego pliku CSS tylko w przypadku gdy będziemy chcieli wydrukować daną stronę internetową (stąd print w zapisie, efekt możemy sprawdzić w podglądzie wydruku) lub w przypadku gdy strona zostanie wyświetlona w telewizorze posiadającym przeglądarkę internetową (stąd tv w zapisie).

Pozostałe oznaczenia mediów zostały omówione podczas poznawania CSS3 - @media queries.

Ponadto należy pamiętać, że ścieżkę do dodatkowego pliku CSS tworzymy względem pliku CSS, do którego ma być dołączony dodatkowy plik CSS.

@supports

@supports - za pomocą tej specyficznej reguły CSS możemy określić style wyglądu dla danych elementów HTML, jednak style te zostaną dodane do naszej strony internetowej tylko, jeżeli dana przeglądarka internetowa interpretuje zapis, który podaliśmy w nawiasie. Tym zapisem może być właściwość CSS wraz z jej wartością.

Przykład:

@supports(transform:rotate(40deg)) {
  div {
    background-color:red;
  }
}

Reguła @supports (transform:rotate(40deg)) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy dana przeglądarka internetowa interpretuje właściwość transform wraz z wartością rotate(40deg).

Więcej o regule @supports powiemy sobie w jednej z następnych części tego kursu CSS.

@font-face

@font-face - za pomocą tej specyficznej reguły CSS możemy dodać dodatkowy typ czcionki do naszej strony internetowej, który został zdefiniowany w osobnym pliku o formacie .ttf.

Plik ten dołączamy za pomocą właściwości src, która jest przeznaczona wyłącznie dla reguły @font-face. W regule tej należy określić nazwę dla naszej czcionki, za pomocą właściwości font-family. Od tej pory czcionkę o danej nazwie będziemy mogli wykorzystać w naszych regułach CSS, posługując się właściwością font-family oraz tą nazwą czcionki, którą ustaliliśmy w regule @font-face.

Przykład:

@font-face {
  font-family:moja_czcionka;
  src:url('http://webkod.pl/images/czcionka1.ttf');
}

div {
  font-family:moja_czcionka;
}

Przy decydowaniu się na dołączenie dodatkowego typu czcionki, do naszej strony internetowej, należy zwrócić uwagę czy dana czcionka umożliwia wyświetlenie wszystkich znaków, które nas interesują, np. polskich znaków, oraz czy reguła @font-face jest interpretowana przez interesujące nas przeglądarki internetowe.

@keyframes

@keyframes - za pomocą tej specyficznej reguły CSS możemy utworzyć reguły animacji, które możemy dodać do elementu HTML za pomocą różnych właściwości CSS należących do grupy animation.

Przykład:

@keyframes moja_animacja
{
  0% {background-color:white;}
  25% {background-color:gold;}
  50% {background-color:red;}
  75% {background-color:green;}
  100% {background-color:white;}
}

div {
  animation:moja_animacja 12s infinite;
}

Więcej o zapisie, który został umieszczony powyżej, mogliśmy dowiedzieć się z jednej z poprzednich części tego kursu CSS - Selektory czasu animacji.

W następnej części kursu CSS zapoznamy się bliżej z regułą @media.