Antarmuka Pengguna CSS

Antarmuka Pengguna CSS

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

  • resize
  • outline-offset

Dukungan peramban

Angka di tabel menandai versi pertama peramban yang mendukung properti 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 Ujikomputer

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

Elemen div ini dapat diukur kembali oleh pengguna!

Mengukur kembali: klik dan seret ujung kanan bawah elemen div ini.

Perhatian:Internet Explorer tidak mendukung properti 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 properti resize untuk menonaktifkan keterukuran ini:

Contoh

textarea {
  resize: none;
}

Coba Sendiri

Garis Latar Belakang Geser CSS

outline-offset Properti menambah ruang di antara kontur dan bingkai elemen.

Div ini memiliki kontur 15px di luar边缘.

Perhatian:Garis kontur berbeda dengan bingkai! Berbeda dengan bingkai, garis kontur diukir di luar bingkai elemen dan mungkin menempel 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 properti outline-offset untuk menambah 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 Tentukan apakah elemen dapat diukur oleh pengguna.