• 0

CSS'de focus-within ile fokuslanan alan oluşturun!

2 hafta önce , Okuma süresi 1 dakika.

CSS'de focus-within ile fokuslanan alan oluşturun!
Bu makalemizde CSS focus-within ile kullanıcılarımıza odaklanacakları alanları belirlemek için nasıl kullanabileceğimizden bahsedeceğim.

Merhaba arkadaşlar CSS'de güzel bir özellikten bahetmek istiyorum. Bir sayfamız var diyelim ve kullanıcı oraya tıkladığında o alana fokuslanmasını istiyoruz bunu nasıl yaparız? Tabiki JS ile bir çok yöntemi var ve hatta CSS hover ile gelişmiş şeylerde yapılabilinir ancak bu tanımlama ile öyle kullanışlı ve kolay olacak ki hazırsak hemen başlayalım. 

HTML Yapısı

HTML sayfamızda 2 input içeren bir form oluşturacağız. Bu özel demo ve anlatım için ihtiyacımız olan şey bu olacak. 

<form>
  <label for="username">Username</label>
  <input type="text" name="username" />
  <br /><br />
   <label for="password">Password</label>
  <input type="password" name="username" />
</form>

CSS Yapısı 

Şimdi sayfamıza CSS ekleyelim; 

body {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}
form {
  border: 1px dashed #333;
  padding: 25px;
  transition: background 0.3s ease;
  &:focus-within {
    background: #f4d35e;
  }
}

Codepen'de nasıl göründüğüne bakalım: 


İşte bu kadar siz dahada geliştirebilirsiniz. Bu arada unutmadan; 

Tarayıcı Desteği

IE'nin çoktan ölmüş olduğunu düşünürsek: iç odaklama seçici aslında oldukça iyi bir desteğe sahip.

CSS odak içi seçici tarayıcı desteği

#css