Sürekli öğrenmeye devam ediyoruz ve geçenlerde evrensel CSS özellikleri adı verilen bir CSS konseptine rastladım. Bunu paylaşmak istedim.
*, * :before, * :after{
box-sizing: border-box;
padding: 0;
margin: 0;
}Öncelikle CSS’nin evrensel seçici özelliği hakkında konuşalım. Bu * seçici, html dosyasındaki her bir öğe için geçerlidir, bu nedenle, bu özelliklere Evrensel CSS özellikleri adı verilmekte. : önce, : sonra sözde seçicilerdir.
Şimdi kutu boyutlandırmaya geliyor, border-box,
kenarlık kutusu, tarayıcıya, bir öğenin genişliği ve yüksekliği için belirttiğiniz değerlerde herhangi bir sınır ve dolguyu hesaba katmasını söyler. Bir öğenin genişliğini 100 piksel olarak ayarlarsanız, bu 100 piksel, eklediğiniz herhangi bir kenarlığı veya dolguyu içerecektir ve içerik kutusu bu ekstra genişliği emmek için küçülecektir. Bu genellikle öğeleri boyutlandırmayı çok daha kolay hale getirir.
developer.mozilla
Şunu ekleyebilirim ki, border-box, elemanınızın genişliği ve yüksekliği sırasıyla 100px ve 100px ise, hangi padding, margin veya border eklerseniz ekleyin bu şekilde kalmasını sağlayacaktır. Bu özelliği CSS dosyalarımda kullanmadan önce, div içinde bir div varken birçok sorunla karşılaştım ve bir kenarlık eklediğimde dış div genişliğini aşacaktı. Çok can sıkıcıydı ve bu özellik hepsini düzeltti. Sadece bunu iş akışınıza dahil edin, sihri göreceksiniz.
Ardından doldurmaya geliyor: padding: 0 ve margin: 0,
HTML’deki her öğenin bazı varsayılan dolgusu ve kenar boşluğu vardır, bu nedenle bunu kaldırmak için bu iki özelliği kullanırız. Bu özelliklerin üstüne benimkini vermek istiyorum.
*, *:before, *:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
input, textarea{
outline: none
}
button, input[type="submit"]{
outline: none;
border: none;
}
button:hover, input[type="submit"]{
cursor: pointer;
transform: translateY(-0.25em);
}
li, a{
text-decoration: none;
}- Bir düğmeye tıkladığınızda veya gönder düğmesi girişine tıkladığınızda, içinde çirkin bir taslak görüyoruz, ben de onu kaldırdım. Tasarım amaçlarınıza uygun kenarlık ve ana hat istediğinizde de bu özelliği kaldırabilirsiniz.
- Düğme üzerine gelindiğinde imleç ekledim: işaretçi ve küçük bir animasyon verdim.
- Sonra listeler (li) ve bağlantı bağları (a) metin süslemesine sahip ve onu kaldırdım.
Tam kaynak kodunu buradan alabilirsiniz; https://github.com/Gautham495/universal-css
Okuduğunuz için teşekkürler!
Bu makaleyi beğendiyseniz, paylaşın ve beni Twitter’dan takip edebilirsiniz 👨🏻💻