CSS interfejs użytkownika

CSS interfejs użytkownika

W tym rozdziale nauczysz się następujących atrybutów interfejsu użytkownika CSS:

  • resize
  • outline-offset

Obsługa przeglądarki

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje ten atrybut.

Właściwość Chrome IE Firefox Safari Opera
resize 4.0 Nieobsługiwane 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS dostosowywanie rozmiaru

resize Atrybut określa, czy element powinien (i w jaki sposób) być dostosowywany rozmiarem przez użytkownika.

Ten element div można dostosować rozmiarem przez użytkownika!

Dostosowywanie rozmiaru: kliknij i przeciągnij dolny prawy róg tego elementu div.

Uwaga:Internet Explorer nie obsługuje atrybutu resize.

Poniższy przykład pozwala użytkownikowi dostosować tylko szerokość elementu <div>:

Przykład

div {
  resize: horizontal;
  overflow: auto;
}

Spróbuj sam

Poniższy przykład pozwala użytkownikowi dostosować tylko wysokość elementu <div>:

Przykład

div {
  resize: vertical;
  overflow: auto;
}

Spróbuj sam

Poniższy przykład pozwala użytkownikowi dostosować wysokość i szerokość elementu <div>:

Przykład

div {
  resize: both;
  overflow: auto;
}

Spróbuj sam

W wielu przeglądarkach, <textarea> domyślnie można dostosować rozmiar. Tutaj użyliśmy atrybutu resize, aby wyłączyć tę możliwość dostosowywania:

Przykład

textarea {
  resize: none;
}

Spróbuj sam

Przesunięcie konturu CSS

outline-offset Atrybut dodaje przestrzeń między konturem a krawędzią elementu.

Ten div ma 15px konturu poza krawędzią ramki.

Uwaga:Kontur różni się od ramki! W przeciwieństwie do ramki, linie konturu są rysowane poza krawędzią elementu i mogą nachodzić na inne treści. Ponadto, kontur nie jest częścią wymiarów elementu: całkowita szerokość i wysokość elementu nie są wpływane przez szerokość linii konturu.

Poniższy przykład używa atrybutu outline-offset, aby dodać przestrzeń między ramką a konturem:

Przykład

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

Spróbuj sam

Właściwości interfejsu użytkownika CSS

Poniższa tabela zawiera wszystkie właściwości interfejsu użytkownika:

Właściwość Opis
outline-offset Dodaje przestrzeń między konturem i krawędzią ramki elementu.
resize Określa, czy element może być zmieniany wielkością przez użytkownika.