CSS3 - Reguła @supports

W tej części kursu CSS dowiemy się do czego możemy wykorzystać regułę @supports, jednak zanim to nastąpi musimy poznać trochę logiki, którą nieświadomie poznaliśmy w poprzedniej części kursu CSS.

W realnym świecie, gdy chcemy postawić sobie jakiś warunek to często jest on uzależniony od pewnych czynników, które muszą zostać spełnione, aby nasz warunek miał racje bytu.

Przykładowo możemy postawić sobie warunek, że weźmiemy ze sobą parasol, jeżeli za oknem jest pochmurna pogoda. Spoglądamy za okno, gdy stwierdzimy, że pogoda nie jest pochmurna, to zostawiamy parasol w domy, ponieważ czynnik pochmurnej pogody nie został spełniony.

Nasz warunek możemy nieco bardziej rozbudować. Możemy postawić sobie warunek, że weźmiemy ze sobą parasol, jeżeli za oknem jest pochmurna pogoda ORAZ w prognozie pogody zapowiadali deszcz, wtedy oba czynniki muszą zostać spełnione, czyli muszą być prawdziwe, abyśmy wzięli ze sobą parasol.

Nasz warunek może być nieco mniej restrykcyjny. Możemy postawić sobie warunek, że weźmiemy ze sobą parasol, jeżeli za oknem jest pochmurna pogoda LUB w prognozie pogody zapowiadali deszcz, wtedy tylko jeden ze wspomnianych czynników musi być prawdziwy, abyśmy wzięli ze sobą parasol.

Nasz warunek może być nieco bardziej rozbudowany.

Przykład:

Warunek = czynnik-1 ORAZ ( czynnik-2 LUB czynnik-3 )

Przykładowe rezultaty zostały umieszczone poniżej:

Warunek = prawdziwy ORAZ ( fałszywy LUB prawdziwy ) = PRAWDA

Warunek = fałszywy ORAZ ( fałszywy LUB prawdziwy ) = FAŁSZ

Warunek = prawdziwy ORAZ ( fałszywy LUB fałszywy ) = FAŁSZ

Warunek = fałszywy ORAZ ( prawdziwy LUB prawdziwy ) = FAŁSZ

Nasz przykładowy warunek będzie prawdziwy tylko w momencie, gdy czynnik-1 będzie prawdziwy, ORAZ któryś z czynników podanych w nawiasie będzie prawdziwy.

Spójrzmy na kolejny przykładowy warunek:

Warunek = czynnik-1 LUB ( czynnik-2 ORAZ czynnik-3 )

Przykładowe rezultaty zostały umieszczone poniżej:

Warunek = prawdziwy LUB ( fałszywy ORAZ prawdziwy ) = PRAWDA

Warunek = fałszywy LUB ( fałszywy ORAZ prawdziwy ) = FAŁSZ

Warunek = fałszywy LUB ( prawdziwy ORAZ prawdziwy ) = PRAWDA

Warunek = prawdziwy LUB ( fałszywy ORAZ fałszywy ) = PRAWDA

Nasz przykładowy warunek będzie prawdziwy tylko w momencie, gdy czynnik-1 będzie prawdziwy LUB wszystkie czynniki podane w nawiasie będą prawdziwe.

Czas zamienić wszystko na język wirtualny :)

W świecie wirtualnym, gdy jakiś czynnik jest prawdziwy to ma wartość true. Czynnik fałszywy ma wartość false. Rezultatem tych czynników może być wartość true lub false. Słowa LUB i ORAZ mogą być zastąpione różnymi znakami, jednak w regule @supports słowo LUB zastępuje się operatorem or, natomiast słowo ORAZ w regule @supports zastępuje się operatorem and.

Przykładowe rezultaty naszego poprzedniego przykładowego warunku, w zmienionym zapisie, wyglądają następująco:

true or ( false and true ) = true

false or ( false and true ) = false

false or ( true and true ) = true

true or ( false and false ) = true

Dodatkowo za pomocą operatora not możemy zaprzeczyć dany warunek, co będzie skutkowało odwróceniem rezultatu, czyli zamiast true otrzymamy false i na odwrót.

not ( true or ( false and true ) ) = false

not ( false or ( false and true ) ) = true

not ( false or ( true and true ) ) = false

not ( true or ( false and false ) ) = false

Wszystkie omówione zależności przydadzą nam się, gdy będziemy chcieli dodać regułę @supports do naszego kodu, ponieważ należy w niej określić warunek, według którego dane reguły CSS zostaną aktywowane w danej przeglądarce internetowej.

Pod spodem zostały wyszczególnione operatory logiczne, którymi możemy posługiwać się w regule @supports.

Tabela przedstawia operatory logiczne jakimi możemy posługiwać się w regule @supports.
Oznaczenie Przeznaczenie
and operator " oraz ", służy do tworzenia bardziej precyzyjnych warunków w regule @supports
or operator " lub ", służy do tworzenia bardziej precyzyjnych warunków w regule @supports
not operator " negacji ", służy do tworzenia bardziej precyzyjnych warunków w regule @supports

Dzięki regule @supports możemy sprawdzić czy dana właściwość CSS oraz jej wartość jest obsługiwana w przeglądarce internetowej, którą użył użytkownik, do wyświetlenia naszej strony internetowej.

Przykład:

@supports( perspective:200px ) {
  div {
    background-color:red;
  }
}

Reguła @supports( perspective:200px ) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy przeglądarka ta interpretuje właściwość perspective oraz wartość jaką dla niej podaliśmy, czyli w tym wypadku 200px.

Uwaga Po wartości właściwości CSS nie stawiamy średnika. Jeżeli chcemy rozbudować nasz warunek w regule @supports(...) to wykorzystujemy do tego celu wcześniej poznane operatory logiczne (and, or, not) oraz pomocnicze nawiasy, które są wymagane przy bardziej złożonych warunkach.

Przykład:

@supports( (perspective:200px) and (perspective-origin:0 50%) ) {
  div {
    background-color:red;
  }
}

Powyższa reguła @supports mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy przeglądarka ta interpretuje właściwość perspective:200px ORAZ właściwość perspective-origin:0 50%.

Uwaga Jeżeli chcemy sprawdzić czy dana właściwość CSS oraz jej wartość jest interpretowana przez poszczególne przeglądarki internetowe to możemy skorzystać z przedrostków (-moz-, -webkit-, -ms- itp.).

Przykład:

@supports(
(filter:sepia(100%)) or
(-moz-filter:sepia(100%)) or
(-webkit-filter:sepia(100%)) or
(-ms-filter:sepia(100%))
) {
  div {
    background-color:white;
  }
}

Uwaga Jeżeli w naszej bardziej złożonej regule @supports chcemy wykorzystać operator not to musimy utworzyć dodatkowy nawias.

Przykład:

@supports( (not (perspective:200px)) and (transform:rotate(45deg)) ) {
  div {
    background-color:red;
  }
}

Powyższa reguła @supports mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy jest prawdą, że dana przeglądarka internetowa nie interpretuje właściwości perspective:200px ORAZ jest prawdą, że dana przeglądarka internetowa interpretuje właściwość transform:rotate(45deg).

Reguły @supports możemy umieszczać zarówno w pliku CSS, jak i w elemencie style, w części head dokumentu HTML.

W następnej części kursu CSS poznamy jak działa funkcja calc(), którą możemy dodawać do różnych właściwości CSS.