MonthTemmuz 2019

Az Bilinen ama Çok İşlevi Olan HTML Etiketleri

Merhaba arkadaşlar kısa bir süre önce keşfetmiş olduğum 3 adet HTML etiketinden ve bu HTML etiketlerinin ne işe yaradıklarından bahsetmek istiyorum.

Bahsedeceğim HTML etiketleri,

  • datalist
  • details
  • inputmode

Datalist Nedir ?

Datalist ile arama yapılabilinen inputlar oluşturabiliriz. Kullanımı şu şekildedir.

<form>
    <label for="dataList">Arama Yapınız:</label>
    <input list="deneme" name="dataList" />
    <datalist id="deneme">
      <option value="Deneme 1">
      <option value="Deneme 2">
      <option value="Deneme 3">
      <option value="Deneme 4">
      <option value="Deneme 5">
      <option value="Deneme 6">
      <option value="Deneme 7">
      <option value="Deneme 8">
   </datalist>
</form>

şeklinde kullanabilirsiniz bu bize görüntü olarak şöyle bir çıktı verecektir.

Bu şekilde dropdown aranabilen aramalar yapabiliriz. Bu HTML özelliğine şu tarayıcılar destek vermektedir.

Details Nedir ?

Details, elementi ayrıca içinde 2 adet alt element barındırması zorunlu olan bir elementtir bu elemenlerden ilki summary ikincisi ise p elementidir. Bu element aslında Javascript ile yapabileceğimiz akordiyon uygulamasının Javascript kullanmadan bu işlemi yapmamızı sağlıyor. Kullanımına bir örnek olarak

<details open>
   <summary>Deneme 1</summary>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum vero doloremque quos, dicta temporibus in, tempora expedita a incidunt, nostrum minus! Temporibus accusamus alias quibusdam esse laborum ex perspiciatis.</p>
</details>
            
<details>
   <summary>Deneme 2</summary>
   <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum vero doloremque quos, dicta temporibus in, tempora expedita a incidunt, nostrum minus! Temporibus accusamus alias quibusdam esse laborum ex perspiciatis.</p>
</details>
            
<details>
   <summary>Deneme 3</summary>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum vero doloremque quos, dicta temporibus in, tempora expedita a incidunt, nostrum minus! Temporibus accusamus alias quibusdam esse laborum ex perspiciatis.</p>
</details>
            
<details>
   <summary>Deneme 4</summary>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum vero doloremque quos, dicta temporibus in, tempora expedita a incidunt, nostrum minus! Temporibus accusamus alias quibusdam esse laborum ex perspiciatis.</p>
</details>

Bunun çıktısı şu şekilde olacaktır

Bu elementin tarayıcı desteği ise şu şekilde olacaktır.

Inputmode Nedir ?

inputmode bir HTML element değil ve aslında masaüstü için herhangi bir şey ifade etmiyor fakat mobil cihazlar için inputmode’a girilen değere göre açılan klavye değişmektedir.

Genel olarak şöyle bir kullanımı vardır

<input inputmode="value">

burada value yerine yazabileceğimiz işinize yarayacak 4 tanesinden bahsedeceğim.

  • numeric -> Numaradan oluşan klavyeyi açar
  • email -> Klavyeyi e-posta adresi girmeye uygun klavye açar
  • tel -> Telefon numarası girmeye uygun için klavye açar
  • url -> URL girmeye uygun klavye açar.

Bu özellik sadece Android için Chrome da ve iOS için Safari ile desteklemektedir. Inputmode’un diğer değerleri hakkında detaylı bilgi almak için buraya tıklayınız.

Özet,

Bu yazımda sizlere genel olarak az bilinen fakat işlevi çok olan 2 adet HTML elementi ve 1 HTML özelliği olan datalist, details ve inputmode’dan bahsettim. Datalist ile dropdown menülü bir arama kutusu yapabilirken. Details ile Javascript ile akordiyon uygulamalarının yaptığı işi yapıyor. inputmode ise mobil cihazlarda o inputun alması gereken değerlere göre farklı klavyeler çıkarmamızı sağlıyor.

Bu yazımı beğendiyseniz ve HTML / CSS hakkında yazmış olduğum diğer yazılarıda merak ediyorsanız buraya tıklayabilirsiniz.

CSS Position Özellikleri

Merhaba arkadaşlar bu yazımda sizlere CSS’deki Position özelliklerinden bahsedeceğim. Position özellikleri bize elementin sayfadaki pozisyonunu belirlememizi sağlamaktadır. Bir elemente Position özelliğini verdikten sonra elemente top, bottom, left ve right gibi özellikler ile sayfadaki final pozisyonunun nasıl olacağını belirtebiliriz.

Position özelliğine 5 farklı değer verebilmekteyiz bunlar,

  • static
  • relative
  • absolute
  • fixed
  • sticky

Şimdi bu özelliklerin ne işe yaradıklarını anlatmak gerekirse

static

Static değeri verilmiş bir element sayfanın olması gerektiği gibi olmasını sağlar. Top, Bottom, Left, Right ve ya z-index özelliklerinin hiç biri bu değer de işlevi yoktur. Bu ön tanımlanmış bir değerdir.

relative

Relative değeri verilmiş element bulunduğu yere göre top, left, bottom, right özellikleri ilerleyecektir. Bunu kelimelerle anlatmak biraz kafanızı karıştırmış olabilir bu yüzden ben size hazırlamış olduğum fotoğraf ile anlatmak istiyorum.

Burada öncelikle ortadaki kutuya position: relative özelliğini verdik ve daha sonra top: 20px left: 20px özelliklerini verdik.

.box-2{
   position: relative;
   top:20px;
   left:20px;
}

absolute

Absolute değeri verilmiş element relative benzer bir özelliği vardır aradaki tek fark artık direkt olarak web sayfasının sol üst tarafı orijin olarak kabul edilir. Yani bir elemente absolute özelliği verirseniz top, left, bottom, right özelliği verdiğimiz de sayfanın sol üst kısmından bu işlemleri verecektir.

.box-2{
   position: absolute;
   top:  20px;
   left: 20px;
}

fixed

Fixed değeri verilmiş element, bu element sayfa yukarı veya aşağı çekilse bile element sayfanın belirlenen kısmında sabit olarak bulunacaktır. Bu elementin bulunacağı yeri top, left, bottom, right özellikleri ile belirleyebiliriz.

Örnek olarak eğer elementin sayfanın sağ alt kısmında bulunmasını istiyorsak şu css kodlarını yazmamız yeterli olacaktır.

.box{
   position: fixed;
   bottom: 0;
   right:  0;
}

kodunu yazdıktan sonra sayfanın sağ altında bulunacak elemente box adlı class değerini verirsek o element sayfanın sağ alt kısmında bulunacaktır.

sticky

Sticky değeri verilmiş bir element, relative ve fixed özellikleri arasında döner. Sayfada bulunduğu yere göre dururken eğer sayfanızı aşağı ve ya yukarı doğru kaydırırken bu elementten kurtulmaya çalıştığınız da fixed özelliği verilmiş bir element gibi davranmaya başlar ve element asıl olduğu yere geldiğinde tekrar relative bir elementmiş gibi davranmaya devam eder.

Buna örnek vermek gerekirse

Gördüğünüz gibi element kendi yerindeyken relative gibi davranırken sayfayı aşağı doğru kaydırmaya başladığımda fixed değeri verilmiş bir element gibi davranmaya başlıyor sayfayı tekrar yukarı kaydırdığımızda ve elementin asıl olması gereken yere geldiğinde tekrar relative olmaya devam ediyor.

Özet,

Bu yazımda sizlere CSS Position özelliklerinden bahsettim. Position özellikleri static, relative, absolute, fixed, sticky olmak üzere 5 farklı değer alabilmektedir. Herhangi bir elemente Position özelliği verilirse bu elemente top, bottom, left ve right gibi özellikler verirken atanan position değerine göre sayfada nasıl bir pozisyonda bulunacağını belirleriz.

Eğer bu yazımı beğendiyseniz ve CSS hakkında yazmış olduğum diğer yazıları merak ediyorsanız buraya tıklayabilirsiniz.

Ayrıca CSS Position Özellikleri hakkında daha detaylı bilgi almak isterseniz buraya tıklayınız.