Öncelikle bu konunun tartışmalı bir konu olduğunu belirtmek isterim. Ancak bootstrap / materialize gibi frameworkler kullanıyorsanız. CSS resetleme işlemleri yapıyorsunuz demektir. Aşağıda basit anlamda bir tasarımcının sayfa yüklenirken yeniden biçimlendirmek isteyeceği etiketlerin CSS özellikleri mevcuttur. Tekrar belirmek isterim ki, bu resetleme kişisel bir deneyimdir. Sizlerin tercihleri de farklı yönde olabilir.
Kenar boşluklarını, dolguları ve kenarlıkları sıfırlama
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | html, body, h1, h2, h3, h4, h5, h6, a, p, span, em, small, strong, sub, sup, mark, del, ins, strike, abbr, dfn, blockquote, q, cite, code, pre, ol, ul, li, dl, dt, dd, div, section, article, main, aside, nav, header, hgroup, footer, img, figure, figcaption, address, time, audio, video, canvas, iframe, details, summary, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; } |
İlk değişiklik, sadece hala kullanabileceğim elementlerin seçicilerini dahil etmem. Örneğin, menü gibi kullanımdan kaldırılmış öğeleri kaldırdım, ancak aynı zamanda ruby öğesi gibi kullanmam gerekmeyen geçerli öğeler de eklemedim.
İkinci değişiklik, font stillerinin sıfırlanmasını aşağıda göreceğiniz gibi başka bir seçiciye taşıdım.
Typography
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | html { font-size: 62.5%; } body { font-size: 1.6rem; line-height: 1.4; } * { font-family: inherit; font-size: inherit; line-height: inherit; } a, a:visited { color: inherit; } |
Ayrıca, her öğedeki font ailesini, font boyutunu ve satır yüksekliğini üst öğesinden devralmak için sıfırlarım. Bu oldukça iyi düşünülmüş ve aslında sıfırlama dosyama yeni bir ektir. Bu şekilde yapıyorum çünkü, genel olarak konuşursak, paragraf elemanlarından farklı font stillerini ayarlama konusunda proaktif olmak istiyorum. Ayrıca, giriş veya düğme gibi form öğelerinin varsayılan gövde metni gibi stillendirilmesi de gerçekten kullanışlıdır. Varsayılan Meyer Sıfırlamasını kullanarak, her zaman bu öğelerin yazı tipini ayrı ayrı stillendirmem gerekti.
Son olarak, genel olarak bağlantı renginin gövde metniyle aynı olmasını tercih ediyorum, bu yüzden miras olarak ayarladım.
Layout & box sizing
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | article, aside, footer, header, nav, section, main { display: block; } * { box-sizing: border-box; } *:before, *:after { box-sizing: inherit; } |
Belirli öğe stillerini sıfırlama
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | table { border-collapse: collapse; border-spacing: 0; } ol, ul { list-style: none; } img, video { max-width: 100%; } img { border-style: none; } blockquote, q { quotes: none; } blockquote:after, blockquote:before, q:after, q:before { content: ""; content: none; } |
Nitelikler ve durumlar
1 2 3 4 5 6 7 8 9 10 11 12 13 | [hidden] { display: none !important; } [disabled] { cursor: not-allowed; } :focus:not(:focus-visible) { outline: none; } |
Hidden özelliğe sahip herhangi bir öğe görünmemelidir.
İmleci, devre dışı bırakılmış öğelere izin verilmez olarak ayarlamak, kişisel olarak tüm projelere eklemek istediğim bir stil.
: focus: not (: focus-visible) seçici, tarayıcının odağın görünür olması gerekmediğini düşündüğü durumlarda anahatları kaldırmamı sağlar. Henüz odaklanmayan sözde sınıfı desteklemeyen tarayıcılar için kuralın tümü yok sayılır ve anahatlar normal kalır.
Ekran okuyucu yalnızca yardımcı program
1 2 3 4 5 6 7 8 | .sr-only { position: absolute; clip: rect(1px, 1px, 1px, 1px); left: -9999px; top: -9999px; } |
Yorum Yap