Ön Uç Projeleri İçin Ortak CSS Sorunları

Bir tarayıcıda bir kullanıcı arabirimi uygularken, kullanıcı arabiriminin tahmin edilebilir olması için bu farklılıkları ve sorunları mümkün olan her yerde en aza indirmek iyidir. Tüm bu farklılıkların kaydını tutmak zordur, bu yüzden yeni bir proje üzerinde çalışırken kullanışlı bir başvuru kılavuzu olarak ortak sorunların bir listesini ve çözümlerini bir araya getirdim.

Hadi başlayalım.

1. button Arka Planını input ve Öğeleri Girin

Bir düğme eklerken arka planını sıfırlayın, aksi takdirde tarayıcılarda farklı görünecektir. Aşağıdaki örnekte, aynı düğme Chrome'da ve Safari'de gösterilmektedir. İkincisi, varsayılan bir gri arka plan ekler.

Arka planı sıfırlamak bu sorunu çözecektir:

 button { appearance: none; background: transparent; /* Other styles */ } 

2. Taşma: scroll karşı auto

Bir öğenin yüksekliğini sınırlamak ve kullanıcının içinde kaydırmasına izin vermek için overflow: scroll-y ekleyin. Bu, macOS'ta Chrome'da iyi görünecek. Ancak Chrome Windows'ta kaydırma çubuğu her zaman oradadır (içerik kısa olsa bile). Bunun nedeni, scroll-y içerikten bağımsız olarak bir kaydırma çubuğu göstermesi, oysa overflow: auto yalnızca gerektiğinde bir kaydırma çubuğu göstermesidir.

 .element { height: 300px; overflow-y: auto; } 

3. flex-wrap ekleyin

Basitçe display: flex ekleyerek bir öğenin esnek kapsayıcı gibi davranmasını sağlayın. Ancak, ekran boyutu küçüldüğünde, flex-wrap eklenmemesi durumunda tarayıcı yatay bir kaydırma çubuğu görüntüler.

 <div class="wrapper"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

 .wrapper { display: flex; } .item { flex: 0 0 120px; height: 100px; }

Yukarıdaki örnek büyük ekranlarda harika çalışacaktır. Mobilde, tarayıcı yatay bir kaydırma çubuğu gösterecektir.

Çözüm oldukça kolaydır. Paketleyici, boş alan olmadığında öğeleri sarması gerektiğini bilmelidir.

 .wrapper { display: flex; flex-wrap: wrap; } 

4. justify-content: space-between

justify-content: space-between esnek bir kaba uygulandığında, öğeleri dağıtır ve aralarında eşit miktarda boşluk bırakır. Örneğimizde sekiz kart öğesi var ve bunlar iyi görünüyor. Ya bir nedenden dolayı öğelerin sayısı yediyse? İkinci eleman sırası, birincisinden farklı görünecektir.

Bu durumda CSS grid kullanmak daha uygun olacaktır.

5. Uzun Kelimeler ve Bağlantılar

Bir makale mobil ekranda görüntülendiğinde, uzun bir kelime veya satır içi bağlantı yatay bir kaydırma çubuğunun görünmesine neden olabilir. CSS'nin word-break kullanmak bunun olmasını engelleyecektir.

 .article-content p { word-break: break-all; } 

Ayrıntılar için CSS-Tricks'e bakın.

6. Şeffaf Gradyanlar

Saydam bir başlangıç ​​ve bitiş noktasına sahip degrade eklerken, Safari'de siyahımsı görünecektir. Bunun nedeni Safari'nin transparent anahtar kelimesini tanımamasıdır. rgba(0, 0, 0, 0) ile değiştirerek beklendiği gibi çalışacaktır. Aşağıdaki ekran görüntüsüne dikkat edin:

 .section-hero { background: linear-gradient(transparent, #d7e0ef), #527ee0; /*Other styles*/ }

Bunun yerine şöyle olmalıdır:

 .section-hero { background: linear-gradient(rgba(0, 0, 0,0), #d7e0ef), #527ee0; /*Other styles*/ }

7. CSS Izgarasında Otomatik auto-fit ve auto-fill Arasındaki Fark Hakkında Yanlış Anlama

CSS ızgarasında, repeat işlevi, medya sorgularının kullanılmasına gerek kalmadan duyarlı bir sütun düzeni oluşturabilir. Bunu başarmak için auto-fill veya auto-fit özelliğini kullanın.

 .wrapper { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } 

Kısacası, auto-fill sütunları genişliklerini genişletmeden düzenlerken, auto-fit onları yalnızca boş sütunlarınız varsa sıfır genişliğe daraltır. Sara Soueidan konuyla ilgili mükemmel bir makale yazdı.

8. Görüntü Alanı Yeterince Uzun Olmadığında Elemanları Ekranın Üstüne Sabitleme

Bir öğeyi ekranın üstüne sabitlerseniz, görüntü alanı yeterince uzun değilse ne olur? Basit: Ekranda yer kaplayacak ve sonuç olarak, kullanıcının web sitesine göz atabileceği dikey alan küçük ve rahatsız olacak, bu da deneyimden olumsuz etkilenecek.

 @media (min-height: 500px) { .site-header { position: sticky; top: 0; /*other styles*/ } }

Yukarıdaki snippet'te, tarayıcıya, yalnızca görünümün yüksekliği 500 piksele eşit veya daha büyükse başlığı en üste sabitlemesini söylüyoruz.

Ayrıca önemli: position: sticky kullandığınızda, top özelliğini belirtmediğiniz sürece çalışmaz.

9. Görüntüler için max-width ayarı

Bir görüntü eklerken, ekran küçükken görüntünün yeniden boyutlandırılması için max-width: 100% tanımlayın. Aksi takdirde, tarayıcı yatay bir kaydırma çubuğu gösterecektir.

 img { max-width: 100%; }

10. main ve aside Öğeleri Tanımlamak için CSS Izgarasını Kullanma

CSS ızgarası, ızgara için mükemmel bir kullanım olan bir düzenin main ve aside bölümlerini tanımlamak için kullanılabilir. Sonuç olarak, aside bölümün yüksekliği, boş olsa bile main elemanın yüksekliğine eşit olacaktır.

Bunu düzeltmek için, aside öğesini üst öğesinin başlangıcına hizalayın, böylece yüksekliği genişlemez.

 .wrapper { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-gap: 20px; } // align-self will tell the aside element to align itself with the start of its parent. aside { grid-column: 1 / 4; grid-row: 1; align-self: start; } main { grid-column: 4 / 13; } 

11. Bir SVG'ye fill Ekleme

Bazen, SVG'lerle çalışırken, fill niteliği SVG'de satır içi olarak eklenmişse, fill beklendiği gibi çalışmaz. Bunu çözmek için, ya SVG'nin kendisinden fill niteliğini kaldırın ya da fill: color öğesini geçersiz kılın.

Bu örneği alın:

 .some-icon { fill: #137cbf; }

SVG'nin satır içi dolgusu varsa bu çalışmaz. Bunun yerine bu olmalı:

 .some-icon path { fill: #137cbf; }

12. Sözde Öğelerle Çalışmak

Elimden geldiğince sözde öğeler kullanmayı seviyorum. Bize, çoğunlukla dekoratif amaçlarla, HTML'ye eklemeden sahte öğeler oluşturmanın bir yolunu sağlarlar.

Onlarla çalışırken yazar aşağıdakilerden birini yapmayı unutabilir:

• content: "" özelliği,
• bunun için display özelliğini tanımlamadan width ve height ayarlayın.

Aşağıdaki örnekte, sözde öğe olarak rozetli bir başlığımız var. content: "" özelliği eklenmelidir. Ayrıca, width ve height beklendiği gibi çalışması için öğede display: inline-block ayarlanmış olmalıdır.

13. display: inline-block

İki veya daha fazla öğeyi display: inline-block veya display: inline , her biri arasında küçük bir boşluk yaratacaktır. Tarayıcı öğeleri sözcükler olarak yorumladığı için boşluk eklenir ve bu nedenle her birinin arasına bir karakter boşluğu ekler.

Aşağıdaki örnekte, her öğenin sağ tarafında 8px bir boşluk vardır, ancak display: inline-block kullanımının neden olduğu küçük boşluk onu 12px yapar, bu da istenen sonuç değildir.

 li:not(:last-child) { margin-right: 8px; } 

Bunun için basit bir düzeltme, ana öğede font-size: 0 değerini ayarlamaktır.

 ul { font-size: 0; } li { font-size: 16px; /*The font size should be reassigned here because it will inherit `font-size: 0` from its parent.*/ } 

14. Bir Girdiye Etiket Öğesi Atarken for="ID" ekleyin

Form öğeleriyle çalışırken, tüm label öğelerinin kendilerine atanmış bir kimliği olduğundan emin olun. Bu onları daha erişilebilir hale getirecek ve tıklandığında ilgili girdiye odaklanılacaktır.

 <label for="emailAddress">Email address:</label> <input type="email"> 

15. Etkileşimli HTML Öğeleriyle Çalışmayan Yazı Tipleri

Tüm belgeye yazı tipleri atarken, bunlar input , button , select ve textarea gibi öğelere uygulanmaz. Tarayıcı varsayılan sistem yazı tipini onlara uyguladığı için varsayılan olarak devralmazlar.

Bunu düzeltmek için font özelliğini manuel olarak atayın:

 input, button, select, textarea { font-family: your-awesome-font-name; }

16. Yatay Kaydırma Çubuğu

Bazı öğeler, bu öğelerin genişliğinden dolayı yatay kaydırma çubuğunun görünmesine neden olur.

Bu sorunun nedenini bulmanın en kolay yolu CSS anahattını kullanmaktır. Addy Osmani, sayfadaki her öğeyi özetlemek için tarayıcı konsoluna eklenebilecek çok kullanışlı bir komut dosyası paylaştı.

 [].forEach.call($$("*"), function(a) { a.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16); }); 

17. Sıkıştırılmış veya Gerilmiş Görüntüler

CSS'de bir görüntüyü yeniden boyutlandırdığınızda, en boy oranı görüntünün genişliği ve yüksekliği ile tutarlı değilse sıkıştırılabilir veya uzatılabilir.

Çözüm basit: CSS'nin object-fit öğesini kullanın. İşlevselliği, background-size: cover .

 img { object-fit: cover; } 

object-fit kullanmak her durumda mükemmel bir çözüm olmayacaktır. Bazı görüntülerin kırpılmadan veya yeniden boyutlandırılmadan görünmesi gerekir ve bazı platformlar kullanıcıyı belirli bir boyutta bir görüntüyü karşıya yüklemeye veya kırpmaya zorlar. Örneğin, Dribbble 800 x 600 piksel boyutunda küçük resim yüklemelerini kabul eder.

18. input için Doğru type ekleyin.

Bir input alanı için doğru type kullanın. Bu, mobil tarayıcılardaki kullanıcı deneyimini geliştirecek ve kullanıcılar için daha erişilebilir hale getirecektir.

İşte bazı HTML:

 <form action=""> <p> <label for="name">Full name</label> <input type="text" id="name"> </p> <p> <label for="email">Email</label> <input type="email" id="email"> </p> <p> <label for="phone">Phone</label> <input type="tel" id="phone"> </p> </form>

Odaklandıktan sonra her girdi şu şekilde görünecektir:

19. RTL Düzenlerinde Telefon Numaraları

Sağdan sola düzende + 972-123555777 gibi bir telefon numarası eklerken, numaranın sonunda artı sembolü yer alacaktır. Bunu düzeltmek için telefon numarasının yönünü yeniden atayın.

 p { direction: ltr; } 

Çözüm

Burada bahsedilen sorunların tümü, ön uç geliştirme çalışmamda karşılaştığım en yaygın sorunlar arasındadır. Amacım, bir web projesi üzerinde çalışırken düzenli olarak kontrol edilecek bir liste tutmak.

CSS'de her zaman karşılaştığınız bir sorununuz mu var? Yorumlarda bize bildirin!