Niektóre własności CSS przyjmują jako wartość obrazy graficzne. Zaliczają się do nich między innymi takie własności, jak border-image, background-image i wiele innych.
Jeśli dana własność przyjmuje obraz graficzny jako wartość, to w specyfikacje CSS jest to oznaczone specjalnym symbolem <image>. Oznacza on, że w danym miejscu można zdefiniować obraz graficzny w dowolny sposób obsługiwany przez CSS.
Na przykład w specyfikacji CSS Backgrounds and Borders Module Level 3 w opisie własności border-image-source (ustawiającej obraz w obramowaniu elementu) znajduje się taki fragment:
Value: none | <image>Ten zapis oznacza, że własność CSS border-image-source może mieć wartość none (brak obrazu) lub dowolną obsługiwaną przez CSS wartość określającą obraz i wówczas zostanie on wyrenderowany w sposób zgodny z ewentualnymi innymi ustawieniami CSS.
To, jakiego typu obrazów graficznych można używać w Kaskadowych arkuszach stylów, zależy w głównej mierze od przeglądarek internetowych. W specyfikacji CSS zawarto tylko wymóg, aby każda przeglądarka obsługiwała formaty PNG i SVG, ale jak wiadomo, wachlarz obsługiwanych typów grafiki przez większość tych aplikacji jest znacznie większy.
Formaty i rodzaje grafiki obsługiwane w CSS
Dwa podstawowe formaty grafiki, które powinna obsługiwać każda przeglądarka, to PNG i SVG, ale w rzeczywistości przeglądarki internetowe obsługują ich o wiele więcej, np. WebP, JPG, GIF, .ico itd.
Formaty takie jak JPG czy WebP to tzw. formaty rastrowe, które mają wymiary naturalne, inaczej nazywane też wymiarami pochodzenia wewnętrznego.
Format .ico reprezentuje ikony, które mogą zawierać po kilka wersji obrazu w jednym pliku i wtedy mają one kilka wymiarów naturalnych. W takim przypadku wymiary pochodzenia wewnętrznego odpowiadają wersji o największej powierzchni i najbliższym współczynniku kształtu do pola zawierającego.
Z kolei SVG to format wektorowy. Obrazy w tym formacie w ogóle nie mają wymiarów naturalnych, a jedynie współczynnik kształtu, czyli stosunek szerokości do wysokości. Na przykład, jeśli obraz ma współczynnik 3:5 i szerokość 300 pikseli, to wiadomo, że jego wysokość wynosi 500 pikseli.
Ponadto w CSS obsługiwane są gradienty, które można definiować za pomocą specjalnej grupy funkcji. Ten rodzaj grafiki nie ma ani wymiarów naturalnych ani określonego współczynnika kształtu. O tych cechach decydują właściwości elementu, dla którego są zdefiniowane.
Wszystkie te rodzaje grafiki mogą być przekazywane do własności CSS przyjmujących obrazy jako wartość.
Najprostszym i najczęściej stosowanym sposobem definiowania grafiki w CSS jest użycie funkcji url(). Oprócz niej istnieje jeszcze parę innych funkcji służących do definiowania grafik na różne sposoby, ale wszystkie są dość nowe i na razie tylko jedna z nich jest już dobrze obsługiwana przez przeglądarki.
Metody definiowania grafik w CSS
W Kaskadowych arkuszach stylów obraz graficzny można zdefiniować za pomocą kilku funkcji, choć nie wszystkie są już w pełni obsługiwane przez wszystkie przeglądarki internetowe. Poniżej znajduje się ich lista. W pełni obsługiwane są dwie pierwsze funkcje i funkcje gradientowe. Pozostałe jeszcze czekają na dopracowanie zarówno w specyfikacji CSS, jak i w przeglądarkach:
- Funkcja
url() - Funkcja
image-set() - Funkcja
cross-fade() - Funkcja
element() - Funkcja
image() - Funkcje gradientowe
Najczęściej stosowanym sposobem określania obrazów w CSS jest użycie funkcji url()(), która służy także do dołączania zasobów innych typów. Szczegółowe informacje na jej temat znajdują się na stronie Funkcja CSS url(). Tutaj interesuje nas tylko prosty przykład jej użycia do zdefiniowania obrazy graficznego.
Aby ustawić obraz w tle obramowania wybranego elementu HTML, można użyć własności border-image-source i funkcji url()(), np.:
border-image-source: url("sciezka_do_obrazu.webp");Jak widać, zastosowanie funkcji url()() jest bardzo proste. Jako wartość przyjmuje ona ścieżkę do pliku graficznego, który chcemy przekazać jako wartość określonej własności CSS.
Jeśli zależy nam na dokładniejszej kontroli nad wstawianą grafiką, to możemy użyć funkcji image-set(). Za jej pomocą można zdefiniować zestaw kilku obrazów, spośród których przeglądarka może wybrać najbardziej odpowiedni w danej sytuacji, np. zależnie od rozdzielczości ekranu albo obsługiwanych typów grafiki.
W poniższym przykładzie, jeśli przeglądarka obsługuje format PNG, to wybierze obraz w tym formacie. A jeśli go nie obsługuje, to wybierze następny, który jest w formacie JPG.
background-image: image-set(
"a.png" type("image/png"),
"b.jpg" type("image/jpeg")
);Szczegółowy opis funkcji CSS image-set() znajduje się na stronie Funkcja CSS image-set.
Za pomocą funkcji cross-fade() można połączyć dwa obrazy, aby stworzyć z nich jeden. Na razie jednak ta funkcja jest niejednolicie obsługiwana przez przeglądarki, więc nie będziemy się nią szczegółowo zajmować.
Z kolei funkcje element() i image() na razie w ogóle nie są obsługiwane przez przeglądarki internetowe.
Podsumowując, z pięciu funkcji wymienionych powyżej, w pełni i stabilnie obsługiwane są tylko funkcje url()() i image-set()(). Pozostałe są jeszcze w fazie rozwoju i na ich obsługę oraz ostateczne ustabilizowanie się trzeba będzie jeszcze poczekać.
Ostatni punkt na naszej liście stanowią funkcje gradientowe. Z ich obsługą przez przeglądarki nie mają problemów, a ich szczegółowy opis znajduje się w rozdziale Gradienty w CSS. Poniżej znajduje się prosty przykład definicji gradientu liniowego w tle elementu:
background: linear-gradient(red, blue);