CSS Kullanıcı Arayüzü

CSS Kullanıcı Arayüzü

Bu bölümde, aşağıdaki CSS kullanıcı arayüzü özelliklerini öğreneceksiniz:

  • resize
  • outline-offset

Tarayıcı Desteği

Tablodaki numaralar, bu özelliği tamamen destekleyen ilk tarayıcı sürümünü belirtir.

Özellik Chrome IE Firefox Safari Opera
resize 4.0 Desteklenmiyor 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS Büyültme

resize Özellik, elementin kullanıcı tarafından büyütülüp büyütülmemesi gerektiğini (ve nasıl olacağını) belirler.

Bu div elementi, kullanıcı tarafından büyültülebilir!

Büyültme: Bu div elementinin sağ alt köşesini tıklayıp sürükleyin.

Dikkat:Internet Explorer, resize özelliğini desteklememektedir.

Aşağıdaki örnek, kullanıcıya sadece <div> elementinin genişliğini ayarlama yetkisi verir:

Örnek

div {
  resize: horizontal;
  overflow: auto;
}

Deneyimleyin

Aşağıdaki örnek, kullanıcıya sadece <div> elementinin yüksekliğini ayarlama yetkisi verir:

Örnek

div {
  resize: vertical;
  overflow: auto;
}

Deneyimleyin

Aşağıdaki örnek, kullanıcıya <div> elementinin genişliğini ve yüksekliğini ayarlama yetkisi verir:

Örnek

div {
  resize: both;
  overflow: auto;
}

Deneyimleyin

Birçok tarayıcıda, <textarea> varsayılan olarak büyütülebilir. Burada, bu genişletilebilirliği devre dışı bırakmak için resize özelliğini kullandık:

Örnek

textarea {
  resize: none;
}

Deneyimleyin

CSS Kontur Ofseti

outline-offset Özellik, kontur ile elementin kenar çerçevesi arasına boşluk ekler.

Bu div, çerçeve kenarları dışında 15px'lik bir kontur çizgisi içerir.

Dikkat:Kontur çerçeve ile farklıdır! Çerçeve ile farklı olarak, kontur çizgileri element çerçevesinin dışında çizilir ve diğer içeriklerle çakışabilir. Ayrıca, kontur da element boyutlarının bir parçası değildir: elementin toplam genişliği ve yüksekliği kontur çizgisi genişliğinden etkilenmez.

Aşağıdaki örnekte, outline-offset özelliği ile çerçeve ve kontur arasındaki boşluk eklendi:

Örnek

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 çizgili mavi;
  outline-offset: 5px;
}

Deneyimleyin

CSS Kullanıcı Arayüzü Özellikleri

Aşağıdaki tablo, tüm kullanıcı arayüzü özelliklerini sıralar:

Özellik Açıklama
outline-offset Profil ve elemanın kenar çizgisi arasına boşluk ekler.
resize Elemanın kullanıcı tarafından büyütülüp büyütülmemesi belirtilir.