Przejdź do treści

Pozycjonowanie

Obcinanie

selektor { position: absolute; clip: rect(góra, prawo, dół, lewo) }

Według CSS 2 polecenie można zastosować do elementów blokowych i zastępowanych. Natomiast w CSS 2.1 ma ono zastosowanie tylko do elementów pozycjonowanych absolutnie. Przeglądarki stosują się do wytycznych z CSS 2.1.

Wyrażenia: "góra, prawo, dół, lewo" oznaczają wartości współrzędnych wyciętego prostokąta, określane względem lewego-górnego narożnika elementu, tzn. są to pozycje odpowiednio: górnego-prawego oraz dolnego-lewego wierzchołka wyciętego prostokąta. Wartości te należy podawać za pomocą jednostek długości. Za każdą z nich można wpisać również auto, co oznacza pominięcie cięcia z wybranej strony.
Zamiast całego wyrażenia rect(góra, prawo, dół, lewo) można również podać auto - wartość automatyczna.

UWAGA! Powyższy opis ustalania krawędzi cięcia pochodzi ze specyfikacji CSS 2.1. We wcześniejszej wersji - CSS 2 - wartości "góra, prawo, dół, lewo" oznaczały odległości cięcia od odpowiednich krawędzi elementu, a nie współrzędne wyciętego prostokąta! Przeglądarki interpretują podane parametry zgodnie z nową wersją specyfikacji - CSS 2.1.

Polecenie pozwala wyciąć z elementu pewien jego fragment (o kształcie prostokąta), a następnie wyświetlić go na ekranie.

Specyfikacja CSS 2 wprowadziła dość poważne zamieszanie, jeżeli chodzi o składnię tego polecenia. Nie dość, że sposób ustalania krawędzi prostokąta cięcia został zupełnie zmieniony w CSS 2.1, ponieważ żadna przeglądarka - prawdopodobnie ze względu na trudności w implementacji - nie interpretowała wcześniejszej propozycji, to jeszcze na dodatek CSS 2 niejednoznacznie określiła, jakimi separatorami powinny być rozdzielone wartości w nawiasie rect(...). CSS 2.1 mówi wyraźnie: każda przeglądarka musi obsługiwać jako separator znak przecinka, ale dodatkowo może przyjmować samą spację. Całe to zamieszanie sprawiło, że MSIE 6.0-7.0 interpretuje wymienione separatory dokładnie na odwrót: spacja działa zawsze, a przecinek tylko w trybie wstecznej zgodności. Firefox i Opera obsługują równorzędnie oba separatory.

Aby polecenie było interpretowane, element musi zostać poddany pozycjonowaniu absolutnemu (wystarczy podać: position: absolute).

MSIE 6.0-7.0 obsługuje to polecenie:
  • w trybie Quirks - zawsze,
  • w trybie zgodności ze standardami - tylko jeżeli wartości w nawiasie rect(...) nie zostały rozdzielone przecinkami.

Przykład:

position: absolute; clip: rect(5px, 50px, 40px, 10px):

position: absolute; clip: rect(5px, 50px, 40px, 10px); width: 100px; height: 75px




position: absolute; clip: rect(5px 50px 40px 10px):

position: absolute; clip: rect(5px 50px 40px 10px); width: 100px; height: 75px




position: absolute; clip: rect(5px, auto, 40px, 10px):

position: absolute; clip: rect(5px, auto, 40px, 10px); width: 100px; height: 75px




Dla porównania bez wycinania:

Zwykły obrazek

Zobacz także

Komentarze

Zobacz więcej komentarzy