Autor publikacji
Virtual Patriot - Administrator

Właściwości CSS z przedrostkami

Data publikacji
Ostatnio edytowano

Czytając kolejne części tego serwisu natkniesz się na właściwości CSS, które będą miały w nazwie, różne przedrostki, takie jak: -moz-, -webkit-, -ms-.

Wspomniane przedrostki są przeznaczone dla konkretnej przeglądarki internetowej.

  • przedrostek -moz- przeznaczony jest dla przeglądarki Mozilla Firefox
  • przedrostek -webkit- przeznaczony jest dla przeglądarki Google Chrome, Safari, Opera
  • przedrostek -ms- przeznaczony jest dla przeglądarki Microsoft Internet Explorer

Język CSS jest językiem, który cały czas się rozwija, są do niego dodawane nowe właściwości, lecz czasami zdarza się, że dana nowa właściwość, musi być w nieco inny sposób "obsłużona" przez poszczególną przeglądarkę internetową i właśnie dlatego powstały przedrostki, które ułatwiają pracę osobom odpowiedzialnym za tworzenie kolejnych wersji danych przeglądarek internetowych i osobom, które pracują nad rozwojem języka CSS.

Przykładowo, właściwość transform wraz z wartością rotate(45deg) obróci element HTML o 45 stopni w prawo, co zostało zaprezentowane w przykładzie, który znajduje się poniżej:

element - div

Jednak w momencie gdy piszę tą część kursu, właściwość transform:rotate(45deg); nie będzie rozumiana przez obecne wersje przeglądarek internetowych, dlatego musimy skorzystać z następującego zapisu: 

div {
  transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
}

Oczywiście z biegiem czasu kolejne wersje najpopularniejszych przeglądarek internetowych powinny już interpretować sam zapis transform:rotate(45deg); jednak póki to nie nastąpi, musimy korzystać z przedrostków -moz-, -webkit- itp.

Przykładowo, właściwość border-radius, która służy do zaokrąglania widocznych rogów elementu HTML, jeszcze jakiś czas temu wymagała stosowania przedrostków, jednak obecnie nie musimy ich już podawać, bo najnowsze wersje przeglądarek internetowych w pełni interpretują sam zapis border-radius.

Kod dokumentu HTML, który prezentuje obrócony element div, został umieszczony poniżej: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      div {
        width:150px;
        line-height:150px;
        margin:0 auto;
        text-align:center;
        background-color:lightblue;
        border:1px solid #000;
        transform:rotate(45deg); /* dla wszystkich w przyszłości */
        -moz-transform:rotate(45deg); /* dla Firefox */
        -webkit-transform:rotate(45deg); /* dla Google Chrome, Safari, Opera 15+ */
        -ms-transform:rotate(45deg); /* dla Internet Explorer */
      }
    </style>
  </head>

  <body>

    <div>element - div</div>

  </body>
</html>

Należy pamiętać, że czasami może zdarzyć się taka sytuacja, że zanim wszystkie najpopularniejsze przeglądarki internetowe zaczną obsługiwać nowo powstałą właściwość języka CSS, to może minąć trochę czasu (czasami nawet kilka miesięcy bądź lat), więc należy śledzić zmiany w tym zakresie. To zadanie może ułatwić nam następujący serwis internetowy - Can I use.

W następnej części kursu CSS przyjrzymy się bliżej właściwościom CSS, które zmieniają rozmiar elementu HTML.