Bu yazıda CSS’de özel öğelerin nasıl ele alındığına bir göz atacağız. Görüntüler, diğer medya ortamları ve form öğeleri, CSS ile stil oluşturma beceriniz açısından normal kutulardan biraz farklı davranır. Neyin mümkün olup olmadığını anlamak biraz hayal kırıklığı yaratabilir. O yüzden bu yazıda bilmeniz gereken bazı temel şeyleri vurgulayacağız.
Değiştirilen öğeler
Görseller ve videolar, değiştirilen öğeler olarak tanımlanır. Bu terim CSS’nin bu öğelerin iç düzenini etkileyemeyeceği, yalnızca sayfadaki diğer öğeler arasındaki konumlarını değiştirebileceği anlamına gelir. Ancak yine de CSS’nin görseller ile de yapabileceği çeşitli şeyler bulunur.
Görseller ve video gibi bazı değiştirilen öğeler de en boy oranına sahip olarak tanımlanır. Bu, hem yatay (x) hem de dikey (y) boyutlarda varsayılan olarak dosyanın gerçek boyutları kullanılarak görüntüleneceği anlamına gelir.
Resimleri boyutlandırma
Bu yazıları takip ettiyseniz zaten bildiğiniz gibi, CSS’deki her şey bir kutu oluşturur. Her iki yönde de görsel dosyasının gerçek boyutlarından daha küçük veya daha büyük bir kutunun içine bir görsel yerleştirirseniz, ya kutudan daha küçük görünür ya da kutuyu taşar. Taşma ile ne olacağı hakkında bir karar vermeniz gerekir.
Aşağıdaki örnekte, her ikisi de 200 piksel boyutunda olan iki kutumuz var:
- Bir tanesi 200 pikselden daha küçük bir resim içeriyor – kutudan daha küçük ve kutuyu doldurmak için esnetmiyoruz.
- Diğeri 200 pikselden daha büyük ve kutudan taşıyor.
.box {
width: 200px;
}
img {
}<div class="wrapper">
<div class="box"><img src="star.png" alt="star"></div>
<div class="box"><img src="balloons.jpg" alt="balloons"></div>
</div>
Peki taşma sorunu hakkında ne yapabiliriz?
Önceki yazıda öğrendiğimiz gibi, yaygın bir teknik, görselin max-width değerini %100 yapmaktır. Bu, görüntünün kutudan daha küçük olmasını, ancak daha büyük olmamasını sağlar. Bu teknik, <video> veya <iframe> gibi diğer değiştirilen öğelerle de çalışır.
Yukarıdaki <img> öğesine max-width: 100% eklemeyi deneyin. Küçük görselin değişmediğini, ancak büyük olanın kutuya sığması için küçüldüğünü göreceksiniz.
Konteynerlerin içindeki görüntüler ile ilgili başka seçimler de yapabilirsiniz. Örneğin, bir görüntüyü bir kutuyu tamamen kaplayacak şekilde boyutlandırmak isteyebilirsiniz.
object-fit özelliği size burada yardımcı olabilir. object-fit değiştirilen öğeyi kullanırken, çeşitli şekillerde bir kutuya sığacak şekilde boyutlandırılabilir.
Aşağıdaki örnekte kutuyu düzgün bir şekilde doldurması için en boy oranını koruyarak görüntüyü küçülten cover değerini kullandık. En-boy oranı korunduğundan, görüntünün bazı kısımları kutu tarafından kırpıldı.
.box {
width: 200px;
height: 200px;
}
img {
height: 100%;
width: 100%;
}
.cover {
object-fit: cover;
}
.contain {
object-fit: contain;
}<div class="wrapper">
<div class="box"><img src="balloons.jpg" alt="balloons" class="cover"></div>
<div class="box"><img src="balloons.jpg" alt="balloons" class="contain"></div>
</div>
Eğer contain değerini kullanırssak, görsel kutunun içine sığacak kadar küçültülür. Görsel, kutu ile aynı en-boy oranında değilse kutunun içinde boşluklar kalacaktır.
fill değeri ise kutuyu dolduracak ancak en boy oranını korumayacaktır.
Düzende değiştirilen öğeler
Değiştirilen öğeler için çeşitli CSS teknikleri kullanırken, bunların diğer öğelerden biraz daha farklı davrandığını fark edebilirsiniz. Örneğin, flex veya ızgara düzenindeki öğeler varsayılan olarak tüm alanı dolduracak şekilde uzatılır. Görseller ise uzamaz ve bunun yerine ızgara alanının veya flex kapsayıcının başlangıcına hizalanır.
Aşağıdaki örnekte, içinde dört öğe bulunan iki sütunlu, iki satırlı bir ızgara kapsayıcımız var. Tüm <div> öğelerin arka plan rengi satırı ve sütunu dolduracak şekilde uzanıyor. Ancak görsele uzama vermiyoruz.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 200px 200px;
gap: 20px;
}
.wrapper > div {
background-color: rebeccapurple;
border-radius: .5em;
}<div class="wrapper">
<img src="star.png" alt="star">
<div></div>
<div></div>
<div></div>
</div>
Bu yazıları sırayla takip ediyorsanız, henüz düzen ile ilgili kılavuza bakmamış olabilirsiniz. Değiştirilen öğeler, bir ızgara veya flex düzenin parçası olduklarında, düzen tarafından garip bir şekilde uzatılmalarını önlemek için farklı varsayılan davranışlara sahip olurlar.
Görüntüyü, içinde bulunduğu ızgara hücresini doldurmaya zorlamak için aşağıdakine benzer bir şey yapmanız gerekir:
img {
width: 100%;
height: 100%;
}Ancak bu durum, görselin uzamasına neden olur. Bu yüzden de muhtemelen yapmak isteyeceğiniz şey bu değildir.
Form öğeleri
CSS ile stil oluşturma söz konusu olduğunda, form öğeleri zor bir konu olabilir. Web Formları kılavuzumuzda bu konuyu detaylı inceleyeceğiz. Bununla birlikte, bu bölümde vurgulanmaya değer birkaç temel noktayı belirtmekte de fayda var.
<input> öğeleri aracılığıyla sayfanıza birçok form denetimi eklenir – bunlar, metin girişleri gibi basit form alanları veya HTML5’te eklenen renk ve tarih seçiciler gibi daha karmaşık alanlar olabilir. <textarea> gibi bazı ek öğeler de birden fazla satırlı metin girişi için kullanılabilir. Ayrıca öğelerin içeriği için kullanılan ve bu şekilde formları etiketleyen <fieldset> ve <legend> öğeleri de bulunur.
HTML5 ayrıca web geliştiricilerine hangi alanların gerekli olduğunu ve hatta girilmesi gerektiğini söylemeye yarayan nitelikler de verir. Kullanıcı beklenmedik bir şey girerse veya gerekli bir alanı boş bırakırsa tarayıcı bir hata mesajı gösterebilir. Farklı tarayıcılar, bu tür öğeler için ne kadar stil gösterecekleri ve özelleştirmeye ne kadar izin verdikleri konusunda birbirinden farklılık gösterir.
Metin giriş öğelerine stil verme
<input type="text"> gibi metin girişine izin veren ve daha spesifik <input type="email"> veya <textarea> gibi öğelerin stili oldukça kolaydır. Sayfanızdaki diğer kutular gibi davranma eğilimindedirler. Ancak bu öğelerin varsayılan stili, kullanıcınızın siteyi ziyaret ettiği işletim sistemine ve tarayıcıya bağlı olarak farklılık gösterir.
Aşağıdaki örnekte, CSS kullanarak bazı metin girişlerinin stilini belirledik – kenarlıklar, kenar boşlukları ve dolgu gibi şeylerin beklediğiniz gibi uygulandığını görebilirsiniz. Farklı girdi türlerini hedeflemek için öznitelik seçiciler kullanıyoruz. Kenarlıkları ayarlayarak, alanlara arka plan renkleri ekleyerek ve yazı tiplerini ve dolguyu değiştirerek bu formun görünümünü değiştirmeyi deneyin.
input[type="text"],
input[type="email"] {
border: 2px solid #000;
margin: 0 0 1em 0;
padding: 10px;
width: 100%;
}
input[type="submit"] {
border: 3px solid #333;
background-color: #999;
border-radius: 5px;
padding: 10px 2em;
font-weight: bold;
color: #fff;
}
input[type="submit"]:hover {
background-color: #333;
}<form>
<div><label for="name">Name</label>
<input type="text" id="name"></div>
<div><label for="email">Email</label>
<input type="email" id="email"></div>
<div class="buttons"><input type="submit" value="Submit"></div>
</form>
Önemli: Form öğelerinin stilini değiştirirken kullanıcıların bu öğelerin form öğeleri olduklarını anlamaları gerektiği konusunda dikkatli olmalısınız. Etrafındaki içerikten neredeyse ayırt edilemeyen, kenarlıkları ve arka planı olmayan bir form girişi oluşturabilirsiniz. Ancak bu stil, form öğelerinin tanınmasını ve doldurulmasını çok zorlaştırır.
Bu kılavuzların HTML bölümündeki form stiliyle ilgili yazıda açıklandığı gibi, daha karmaşık girdi türlerinin çoğu işletim sistemi tarafından oluşturulur ve stile erişilemez. Bu nedenle, formların farklı ziyaretçiler için oldukça farklı görüneceğini her zaman varsaymalı ve karmaşık formları birkaç tarayıcıda test etmelisiniz.
Kalıtım ve form öğeleri
Bazı tarayıcılarda, form öğeleri varsayılan olarak yazı tipi stilini devralmaz. Bu nedenle, form alanlarınızın gövdede veya bir üst öğede tanımlanan yazı tipini kullandığından emin olmak istiyorsanız bu kuralı CSS’nizde belirtmelisiniz.
button,
input,
select,
textarea {
font-family : inherit;
font-size : 100%;
} Form öğeleri ve kutu boyutlandırma
Farklı tarayıcılarda form öğeleri farklı widget’lar için farklı kutu boyutlandırma kuralları kullanır. Kutu modeli yazımızda bu box-sizing özelliğini incelemiştik. Bu bilgiyi form öğelerinde genişlik ve yükseklik ayarlarken tutarlı bir deneyim sağlamak için formları şekillendirirken kullanabilirsiniz.
Tutarlılık için tüm öğelerde kenar boşlukları ve dolgulara 0 ayarlamak ve ardından belirli kontrolleri yeniden düzenlerken bunları tekrar eklemek iyi bir fikir olacaktır:
button,
input,
select,
textarea {
box-sizing: border-box;
padding: 0;
margin: 0;
}Diğer faydalı ayarlar
Yukarıda belirtilen kurallara ek olarak <textarea> için overflow:auto özelliğini gerekmediğinde IE’nin kaydırma çubuğunu göstermesini durdurmak için ayarlayabilirsiniz.
textarea {
overflow: auto;
}Hepsini bir “sıfırlama” içinde bir araya getirmek
Son adım olarak, sayfanızda tutarlı bir temel sağlamak için yukarıda tartışılan çeşitli özellikleri aşağıdaki “form sıfırlama” ile tamamlayabiliriz. Bu, son üç bölümde bahsedilen tüm öğeleri içerir:
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
box-sizing: border-box;
padding: 0;
margin: 0;
}
textarea {
overflow: auto;
} Not: Stil sayfalarını normalleştirme, birçok geliştirici tarafından tüm projelerde kullanılacak bir dizi temel stil oluşturmak için kullanılır. Tipik olarak bunlar, yukarıda açıklananlara benzer şeyler yaparak, siz CSS üzerinde kendi çalışmanızı yapmadan önce tarayıcılar arasında farklı olan her şeyin tutarlı bir varsayılana ayarlandığından emin olmanızı sağlar. Her ne kadar tarayıcılar geçmişte olduğundan daha tutarlı iseler de, normalleştirici bir örneğe bakmak isterseniz Normalize.css‘e bakabilirsiniz. Normalize.css birçok proje tarafından temel olarak kullanılan çok popüler bir stil sayfasıdır.
Becerilerinizi test edin!
Bu makalede çok şey ele aldık, ancak en önemli bilgiyi hatırlayabiliyor musunuz? Devam etmeden önce bu bilgileri öğrendiğinizden emin olun.
Özet
Bu yazıda CSS’deki resimler, görseller ve diğer olağandışı öğelerle çalışırken karşılaşacağınız bazı farklılıkları vurguladık. Bir sonraki makalede, HTML tablolarına stil vermeniz gerektiğinde faydalı bulacağınız birkaç ipucuna bakacağız.