Antarmuka Pengguna CSS

Antarmuka Pengguna CSS

Dalam bab ini, Anda akan belajar tentang properti user interface CSS berikut:

  • resize
  • outline-offset

Dukungan Peramban

Angka di tabel menunjukkan versi peramban pertama yang mendukung atribut ini penuh.

Properti Chrome IE Firefox Safari Opera
resize 4.0 Tidak didukung 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS Mengukur Kembali

resize Atribut menentukan apakah elemen seharusnya (dan bagaimana) diukur kembali oleh pengguna.

Elemen div ini dapat diukur kembali oleh pengguna!

Mengukur kembali: Klik dan seret bagian kanan bawah elemen div ini.

Perhatian:Internet Explorer tidak mendukung atribut resize.

Contoh di bawah ini hanya memungkinkan pengguna untuk mengukur kembali lebar elemen <div>:

Contoh

div {
  resize: horizontal;
  overflow: auto;
}

Coba Sendiri

Contoh di bawah ini hanya memungkinkan pengguna untuk mengukur kembali ketinggian elemen <div>:

Contoh

div {
  resize: vertical;
  overflow: auto;
}

Coba Sendiri

Contoh di bawah ini memungkinkan pengguna untuk mengukur kembali ketinggian dan lebar elemen <div>:

Contoh

div {
  resize: both;
  overflow: auto;
}

Coba Sendiri

Dalam banyak peramban, <textarea> secara default dapat diukur kembali. Disini, kami menggunakan atribut resize untuk menonaktifkan kekuatan ini:

Contoh

textarea {
  resize: none;
}

Coba Sendiri

Garis Latar Belakang Geser CSS

outline-offset Atribut menambahkan ruang di antara kontur dan bagian bingkai elemen.

Div ini memiliki kontur 15px di luar bagian bingkai.

Perhatian:Kontur berbeda dengan bingkai! Berbeda dengan bingkai, garis kontur digaris di luar bingkai elemen dan mungkin menimbulkan tumpang tindih dengan konten lain. Selain itu, kontur juga bukan bagian dari ukuran elemen: lebar dan tinggi total elemen tidak dipengaruhi oleh lebar garis kontur.

Contoh di bawah ini menggunakan atribut outline-offset untuk menambahkan ruang antara garis kontur dan bingkai:

Contoh

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;
}

Coba Sendiri

Properti Antarmuka Pengguna CSS

Tabel di bawah ini menampilkan semua properti antarmuka pengguna:

Properti Deskripsi
outline-offset Menambahkan ruang di antara garis kontur dan bagian bingkai elemen.
resize Menentukan apakah elemen dapat diukur ukur pengguna.