CSS3 - Reguła @supports
- Data publikacji
- Ostatnio edytowano
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:
Przykładowe rezultaty zostały umieszczone poniżej:
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:
Przykładowe rezultaty zostały umieszczone poniżej:
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:
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 ( 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.
| 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.