CSS

Tarayıcı, bir öğede hangi stilleri göstereceğini CSS kurallarının özgüllüğüne göre belirler. Tarayıcının belirli bir öğeyle eşleşen kuralları zaten belirlediğini varsayıyoruz. Eşleşen kurallar arasında, dört virgülle ayrılmış değer olan a, b, c, d her kural için aşağıdakilere göre hesaplanır:

1. a, satır içi stil kullanılıp kullanılmadığıdır. Özellik bildirimi öğede satır içi stil ise a 1'dir, aksi takdirde 0'dır.
2. b ID seçicilerinin sayısıdır.
3. c sınıf, öznitelik ve sözde sınıf seçicilerinin sayısıdır.
4. d etiket ve sözde öğe seçicilerinin sayısıdır.

Ortaya çıkan özgüllük bir puan değil, sütun sütun karşılaştırılabilecek bir değer matrisidir. En yüksek özgüllüğe sahip olanı belirlemek için seçicileri karşılaştırırken soldan sağa bakın ve her sütundaki en yüksek değeri karşılaştırın. Bu nedenle b sütunundaki bir değer, c ve d sütunlarındaki değerleri, ne olursa olsun geçersiz kılacaktır. Bu nedenle 0,1,0,0 özgüllüğü 0,0,10,10'dan daha büyük olacaktır.

Eşit özgüllük durumlarında: en son kural geçerlidir. Stil sayfanıza (dahili veya harici olmasına bakılmaksızın) aynı kuralı iki kez yazdıysanız, stil sayfanızdaki alt kuralın stil verilecek öğeye daha yakın olduğu kabul edilir ve bu nedenle daha özgül kabul edilir ve uygulanır.

Gerektiğinde kolayca geçersiz kılınabilmeleri için düşük özgüllüğe sahip CSS kuralları yazardım. CSS UI bileşen kitaplığı kodu yazarken, kütüphane kullanıcılarının özgüllüğü artırmak veya !important kullanmak uğruna çok karmaşık CSS kuralları kullanmak zorunda kalmadan onları geçersiz kılabilmeleri için düşük özgüllüklere sahip olmaları önemlidir.

• Sıfırlama - Sıfırlama, öğelerdeki tüm varsayılan tarayıcı stilini kaldırmak anlamına gelir. Örneğin, tüm öğelerin marginleri, paddingleri, font-sizeleri aynı olacak şekilde sıfırlanır. Ortak tipografik öğeler için stilinizi yeniden bildirmeniz gerekir.
• Normalleştirme - Normalleştirme, her şeyi 'stilsizleştirme' yerine kullanışlı varsayılan stilleri korur. Ayrıca yaygın tarayıcı bağımlılıkları için hataları düzeltir.

Kendi stilimi çok fazla yapmam gereken ve herhangi bir varsayılan stilin korunmasına ihtiyacım olmayan çok özel veya alışılmadık bir site tasarımına sahip olduğumda sıfırlamayı seçerdim.

Float bir CSS konumlandırma özelliğidir. Floated öğeler sayfanın akışının bir parçası olarak kalır ve diğer öğelerin konumunu etkiler (örneğin metin floated öğelerin etrafında akar), position: absolute öğelerinin aksine, bunlar sayfanın akışından çıkarılır.

CSS clear özelliği, left/right/both floated öğelerinin altına konumlandırmak için kullanılabilir.

Bir üst öğe sadece floated öğeler içeriyorsa, yüksekliği sıfıra düşecektir. Bu, floated öğelerden sonra ancak kapsayıcının kapanmasından önce kapsayıcıdaki float'ı temizleyerek düzeltilebilir.

.clearfix hilesi, floatları temizlemek için akıllı bir CSS sözde seçici (::after) kullanır. Üst öğeye overflow ayarlamak yerine, ona ek bir clearfix sınıfı uygularsınız. Ardından bu CSS'i uygulayın:

.clearfix::after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Alternatif olarak, üst öğeye overflow: auto veya overflow: hidden özelliğini verin, bu da çocukların içinde yeni bir blok biçimlendirme bağlamı oluşturacak ve çocuklarını içerecek şekilde genişleyecektir.

CSS'teki z-index özelliği, üst üste binen öğelerin dikey yığınlama sırasını kontrol eder. z-index yalnızca static olmayan bir position değerine sahip öğeleri etkiler.

Herhangi bir z-index değeri olmadan, öğeler DOM'da göründükleri sırada yığınlanır (aynı hiyerarşi düzeyinde en alttaki en üstte görünür). Statik olmayan konumlandırmaya sahip öğeler (ve alt öğeleri), HTML hiyerarşisinden bağımsız olarak her zaman varsayılan statik konumlandırmaya sahip öğelerin üstünde görünecektir.

Yığınlama bağlamı, bir dizi katman içeren bir öğedir. Yerel bir yığınlama bağlamı içinde, alt öğelerinin z-index değerleri belge köküne göre değil, o öğeye göre ayarlanır. Bu bağlamın dışındaki katmanlar - yani yerel bir yığınlama bağlamının kardeş öğeleri - içinde katmanlar arasında yer alamaz. Eğer bir öğe B, öğe A'nın üstünde yer alıyorsa, öğe A'nın alt öğesi olan öğe C, öğe C'nin öğe B'den daha yüksek bir z-index'i olsa bile öğe B'den asla daha yüksek olamaz.

Her yığınlama bağlamı kendi içinde bağımsızdır - öğenin içeriği yığınlandıktan sonra, tüm öğe üst yığınlama bağlamının yığınlama sırasına dahil edilir. Birkaç CSS özelliği yeni bir yığınlama bağlamını tetikler, örneğin 1'den küçük opacity, none olmayan filter ve none olmayan transform.

_Not: Bir öğeyi yığınlama bağlamı oluşturmaya tam olarak neyin uygun olduğu, bu uzun [kurallar] kümesinde listelenmiştir.

Bir Blok Biçimlendirme Bağlamı (BFC), blok kutularının düzenlendiği bir web sayfasının görsel CSS renderının bir parçasıdır. Float'lar, kesinlikle konumlandırılmış öğeler, inline-blocks, table-cells, table-caption'lar ve visible dışındaki overflow'a sahip öğeler (bu değer görünüm alanına yayılmadığı sürece) yeni blok biçimlendirme bağlamları oluşturur.

Bir blok biçimlendirme bağlamının nasıl oluşturulacağını bilmek önemlidir, çünkü bunu yapmadan, kapsayıcı kutu [float çocukları içermeyecektir]. Bu, kenar boşluklarının çökmesine benzer, ancak tüm kutuların garip şekillerde çöktüğünü göreceğiniz için daha sinsi bir durumdur.

Bir BFC, aşağıdaki koşullardan en az birini sağlayan bir HTML kutusudur:

• float değeri none değildir.
• position değeri static veya relative değildir.
• display değeri table-cell, table-caption, inline-block, flex veya inline-flex, grid veya inline-grid'dir.
• overflow değeri visible değildir.

Bir BFC'de, her kutunun sol dış kenarı, kapsayan bloğun sol kenarına dokunur (sağdan sola biçimlendirme için, sağ kenarlar dokunur).

Bir BFC'deki bitişik blok düzeyindeki kutular arasındaki dikey kenar boşlukları çöker. [Kenar boşluklarının çökmesi] hakkında daha fazla bilgi edinin.

• Boş div yöntemi - <div style="clear:both;"></div>.
• Clearfix yöntemi - Yukarıdaki .clearfix sınıfına bakın.
• overflow: auto veya overflow: hidden yöntemi - Üst öğe yeni bir blok biçimlendirme bağlamı oluşturacak ve floated çocuklarını içerecek şekilde genişleyecektir.

Büyük projelerde, ihtiyacım olan yerlerde kullanmak üzere bir yardımcı .clearfix sınıfı yazardım. overflow: hidden çocukları, eğer çocuklar üst öğeden daha uzunsa kesebilir ve çok ideal değildir.

CSS sprite'ları birden fazla görüntüyü tek bir daha büyük görüntüde birleştirir. Simgeler için yaygın olarak kullanılan bir tekniktir (Gmail bunu kullanır). Nasıl uygulanır:

1. Birden fazla görüntüyü tek bir pakette birleştiren ve bunun için uygun CSS'yi oluşturan bir sprite oluşturucu kullanın.
2. Her görüntünün background-image, background-position ve background-size özelliklerinin tanımlandığı karşılık gelen bir CSS sınıfı olurdu.
3. Bu görüntüyü kullanmak için, öğenize karşılık gelen sınıfı ekleyin.

Avantajlar:

• Birden çok görüntü için HTTP isteklerinin sayısını azaltır (sprite sayfası başına yalnızca bir tek istek gerekir). Ancak HTTP2 ile birden çok görüntü yüklemek artık büyük bir sorun değil.
• Gerektiğinde indirilmeyecek varlıkların önceden indirilmesi, örneğin yalnızca :hover sözde durumlarında görünen görüntüler. Yanıp sönme görülmezdi.

• Sorunu ve sorunlu tarayıcıyı belirledikten sonra, yalnızca o belirli tarayıcı kullanılırken yüklenen ayrı bir stil sayfası kullanın. Ancak bu teknik sunucu tarafı render gerektirir.
• Bu stil sorunlarını sizin için zaten halleden Bootstrap gibi kütüphaneleri kullanın.
• Kodunuza otomatik olarak satıcı ön ekleri eklemek için autoprefixer kullanın.
• Reset CSS veya Normalize.css kullanın.
• Postcss (veya benzer bir derleme kütüphanesi) kullanıyorsanız, kodunuzun o bölümlerini kullandığınız hedeflerde çalışacak ilgili güvenli koda dönüştürecek modern CSS sözdizimini (ve hatta W3C tekliflerini) kullanmayı seçmenize izin veren eklentiler olabilir.

• Zarif bozulma - Modern tarayıcılar için bir uygulama geliştirme pratiği, eski tarayıcılarda da işlevselliğini korumasını sağlar.
• Aşamalı geliştirme - Bir uygulamayı temel bir kullanıcı deneyimi düzeyi için geliştirme pratiği, ancak bir tarayıcı bunu desteklediğinde işlevsel geliştirmeler ekleme.
• Özellik desteğini kontrol etmek için [caniuse.com] kullanın.
• Otomatik satıcı ön ek ekleme için Autoprefixer.
• [Modernizr] kullanarak özellik algılama.
• CSS Özellik sorgularını [@support] kullanın.

Bu teknikler erişilebilirlik (a11y) ile ilgilidir.

• width: 0; height: 0. Öğenin ekranda hiç yer kaplamamasını sağlayın, bu da görünmemesini sağlar.
• position: absolute; left: -99999px. Ekranın dışına konumlandırın.
• text-indent: -9999px. Bu sadece block öğelerindeki metin üzerinde çalışır. Bu yaygın olarak kullanılan ve ünlü bir hiledir, ancak performans sorunlarına neden olmak gibi [bazı dezavantajları] vardır, bu nedenle bunun yerine text-indent: 100% kullanmayı düşünebilirsiniz.
• Meta etiketler. Örneğin Schema.org, RDF ve JSON-LD kullanarak.
• WAI-ARIA. Web sayfalarının erişilebilirliğini nasıl artırılacağını belirten bir W3C teknik spesifikasyonu.

WAI-ARIA ideal çözüm olsa bile, en az sorunu olan, çoğu öğe için çalışan ve kolay bir teknik olduğu için absolute konumlandırma yaklaşımını tercih ederdim.

Flex popüler olmadan önce (yaklaşık 2014), float tabanlı ızgara sistemi en güvenilir olanıydı çünkü alternatif mevcut sistemler (flex, grid) arasında hala en fazla tarayıcı desteğine sahipti. Bootstrap, Bootstrap 4'e kadar float yaklaşımını kullanıyordu ve flex tabanlı yaklaşıma geçti. Yazıldığı gibi (2020), flex ızgara sistemleri oluşturmak için önerilen yaklaşımdır ve [iyi tarayıcı desteğine] sahiptir.

Macera arayanlar, parlak yeni grid özelliğini kullanan [CSS Izgara Düzeni]'ne bakabilirler; ızgara düzenleri oluşturmak için flex'ten bile daha iyidir ve gelecekte bunu yapmanın fiili yolu olacaktır.

Evet. Bir örnek, belirli bir kesme noktasının ötesinde yığılmış bir hap navigasyonunu sabit alt sekme navigasyonuna dönüştürmek olabilir.

Evet, şekilleri renklendirmenin (nesneye nitelikler belirterek dahil) satır içi CSS, gömülü bir CSS bölümü veya harici bir CSS dosyası kullanarak birkaç yolu vardır. Web'de bulacağınız çoğu SVG satır içi CSS kullanır, ancak her türle ilişkili avantajlar ve dezavantajlar vardır.

Temel renklendirme, düğümde iki nitelik ayarlayarak yapılabilir: fill ve stroke. fill, nesnenin içindeki rengi ayarlar ve stroke, nesnenin etrafında çizilen çizginin rengini ayarlar. HTML'de kullandığınız aynı CSS renk adlandırma şemalarını kullanabilirsiniz, ister renk adları (red), RGB değerleri (rgb(255,0,0)), Onaltılık değerler, RGBA değerleri vb.

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />

Yukarıdaki fill="purple" bir sunum niteliği örneğidir. İlginç bir şekilde ve style="fill: purple" gibi satır içi stillerin aksine, sunum nitelikleri bir stil sayfasında tanımlanan CSS stilleri tarafından [geçersiz kılınabilir]. Yani, svg { fill: blue; } gibi bir şey yapsaydınız, tanımladığımız mor dolguyu geçersiz kılacaktı.

Evet, dört tür @media özelliği vardır (ekran dahil):

• all - tüm medya türü cihazlar için
• print - yazıcılar için
• speech - sayfayı yüksek sesle "okuyan" ekran okuyucular için
• screen - bilgisayar ekranları, tabletler, akıllı telefonlar vb. için

İşte print medya türünün kullanımına bir örnek:

@media print {
  body {
    color: black;
  }
}

Öncelikle, tarayıcıların seçicileri en sağdan (anahtar seçici) sola doğru eşleştirdiğini anlayın. Tarayıcılar DOM'daki öğeleri anahtar seçiciye göre filtreler ve eşleşmeleri belirlemek için üst öğelerini yukarı doğru tarar. Seçici zincirinin uzunluğu ne kadar kısa olursa, tarayıcı o öğenin seçiciyle eşleşip eşleşmediğini o kadar hızlı belirleyebilir. Bu nedenle, etiket ve evrensel seçiciler olan anahtar seçicilerden kaçının. Bunlar çok sayıda öğeyle eşleşir ve tarayıcıların üst öğelerin eşleşip eşleşmediğini belirlemek için daha fazla iş yapması gerekir.

[BEM (Block Element Modifier)] metodolojisi, her şeyin tek bir sınıfa sahip olmasını önerir ve hiyerarşiye ihtiyacınız olduğunda, bu da sınıfın adına dahil edilir, bu da doğal olarak seçiciyi verimli ve geçersiz kılmayı kolaylaştırır.

Hangi CSS özelliklerinin reflow, repaint ve compositing'i [tetiklediğinin] farkında olun. Mümkün olduğunca düzeni değiştiren (reflow'u tetikleyen) stiller yazmaktan kaçının.

Avantajları:

• CSS daha bakımı kolay hale gelir.
• İç içe seçiciler yazmak kolaydır.
• Tutarlı tema oluşturma için değişkenler. Farklı projeler arasında tema dosyaları paylaşılabilir.
• Tekrarlanan CSS oluşturmak için mixinler.
• Sass'ın döngüler, listeler ve haritalar gibi özellikleri yapılandırmayı daha kolay ve daha az ayrıntılı hale getirebilir.
• Kodunuzu birden çok dosyaya bölme. CSS dosyaları da bölünebilir, ancak bunu yapmak her CSS dosyasını indirmek için bir HTTP isteği gerektirecektir.

Dezavantajları:

• Önişleme için araçlar gerektirir. Yeniden derleme süresi yavaş olabilir.
• Şu anda ve potansiyel olarak kullanılabilir CSS yazmamak. Örneğin, [webpack] ile [postcss-loader] gibi bir şey kullanarak, potansiyel olarak geleceğe uyumlu CSS yazabilir, böylece Sass değişkenleri yerine CSS değişkenleri gibi şeyleri kullanmanıza olanak tanır. Böylece, standart hale geldiklerinde karşılığını verebilecek yeni beceriler öğrenmiş olursunuz.

Beğeniler:

• Çoğunlukla yukarıda belirtilen avantajlar.
• Node ile iyi çalışan daha az JavaScript yazılmış olması.

Beğenilmeyenler:

• Sass'ı C++ ile yazılmış LibSass için bir bağlama olan node-sass aracılığıyla kullanıyorum. Node sürümleri arasında geçiş yaparken sık sık yeniden derlemem gerekiyor.
• Less'te, değişken adları @ ile öneklenir, bu da @media, @import ve @font-face kuralı gibi yerel CSS anahtar kelimeleriyle karıştırılabilir.

@font-face kullanın ve farklı font-weightler için font-family tanımlayın.

Bu bölüm yukarıdaki verimli CSS yazımı ile ilgilidir. Tarayıcılar seçicileri en sağdan (anahtar seçici) sola doğru eşleştirir. Tarayıcılar DOM'daki öğeleri anahtar seçiciye göre filtreler ve eşleşmeleri belirlemek için üst öğelerini yukarı doğru tarar. Seçici zincirinin uzunluğu ne kadar kısa olursa, tarayıcı o öğenin seçiciyle eşleşip eşleşmediğini o kadar hızlı belirleyebilir.

Örneğin p span seçicisiyle, tarayıcılar öncelikle tüm <span> öğelerini bulur ve bir <p> öğesini bulmak için üst öğesini köke kadar tarar. Belirli bir <span> için, bir <p> bulur bulmaz, <span>'ın eşleştiğini bilir ve eşleşmesini durdurabilir.

Bir CSS sözde öğesi, seçilen öğelerin belirli bir bölümünü stilize etmenize olanak tanıyan bir seçiciye eklenmiş bir anahtar kelimedir. Dekarasyon için (:first-line, :first-letter) veya işaretlemeye öğeler eklemek için ( content: ... ile birlikte) işaretlemeyi değiştirmeye gerek kalmadan (:before, :after) kullanılabilirler.

• :first-line ve :first-letter metni süslemek için kullanılabilir.
• Yukarıda gösterildiği gibi .clearfix hilesinde clear: both ile sıfır boşluklu bir öğe eklemek için kullanılır.
• Tooltip'lerdeki üçgen oklar :before ve :after kullanır. Üçgenin stilin bir parçası olduğu ve aslında DOM olmadığı için sorumlulukların ayrılmasını teşvik eder.

CSS kutu modeli, belge ağacındaki öğeler için oluşturulan ve görsel biçimlendirme modeline göre düzenlenmiş dikdörtgen kutuları açıklar. Her kutunun bir içerik alanı (örneğin metin, bir görüntü vb.) ve isteğe bağlı çevreleyen padding, border ve margin alanları vardır.

CSS kutu modeli aşağıdakileri hesaplamaktan sorumludur:

• Bir blok öğenin ne kadar yer kapladığı.
• Kenarlıkların ve/veya kenar boşluklarının üst üste gelip gelmediği veya çöküp çökmediği.
• Bir kutunun boyutları.

Kutu modelinin aşağıdaki kuralları vardır:

• Bir blok öğenin boyutları width, height, padding, borderlar ve marginler ile hesaplanır.
• height belirtilmemişse, bir blok öğe içerdiği içerik kadar yüksek olacaktır, artı padding (float'lar olmadığı sürece, bunlar için aşağıya bakın).
• width belirtilmemişse, float'lanmayan bir blok öğe, ebeveyninin genişliğine padding eksiği kadar genişleyecektir.
• Bir öğenin height'ı içeriğin height'ı ile hesaplanır.
• Bir öğenin width'ı içeriğin width'ı ile hesaplanır.
• Varsayılan olarak, paddingler ve borderlar bir öğenin width ve height'ının bir parçası değildir.

• Varsayılan olarak, öğelere box-sizing: content-box uygulanır ve yalnızca içerik boyutu dikkate alınır.
• box-sizing: border-box, öğelerin width ve height değerlerinin nasıl hesaplandığını değiştirir; border ve padding de hesaplamaya dahil edilir.
• Bir öğenin height'ı artık içeriğin height'ı + dikey padding + dikey border genişliği ile hesaplanır.
• Bir öğenin width'ı artık içeriğin width'ı + yatay padding + yatay border genişliği ile hesaplanır.
• Kutu modelimizin bir parçası olarak padding ve border'ları dikkate almak, tasarımcıların içerikleri ızgaralarda gerçekten nasıl hayal ettikleriyle daha iyi örtüşür.

• none, block, inline, inline-block, flex, grid, table, table-row, table-cell, list-item.

| display | Açıklama | | :-- | :-- | | none | Bir öğeyi görüntülemez (öğe artık belgenin düzenini etkilemez). Tüm alt öğeler de artık görüntülenmez. Belge, öğe belge ağacında yokmuş gibi işlenir | | block | Öğeyi blok yönünde (genellikle yatay) tüm satırı tüketir | | inline | Öğeler birbirinin yanına yerleştirilebilir | | inline-block | inline'a benzer, ancak width ve height ayarlama gibi bazı block özelliklerine izin verir | | table | <table> öğesi gibi davranır | | table-row | <tr> öğesi gibi davranır | | table-cell | <td> öğesi gibi davranır | | list-item | list-style-type ve list-style-position tanımlamasına izin veren bir <li> öğesi gibi davranır |

İyi ölçmek için block ile bir karşılaştırma da ekleyeceğim.

| | block | inline-block | inline | | --- | --- | --- | --- | | Boyut | Üst kapsayıcısının genişliğini doldurur. | İçeriğe bağlıdır. | İçeriğe bağlıdır. | | Konumlandırma | Yeni bir satırda başlar ve yanında HTML öğelerine tolerans göstermez ( float eklemediğiniz sürece) | Diğer içeriklerle birlikte akar ve yanında başka öğelere izin verir. | Diğer içeriklerle birlikte akar ve yanında başka öğelere izin verir. | | width ve height belirtebilir mi | Evet | Evet | Hayır. Ayarlanırsa göz ardı edilir. | | vertical-align ile hizalanabilir mi | Hayır | Evet | Evet | | Kenar boşlukları ve dolgular | Tüm kenarlar dikkate alınır. | Tüm kenarlar dikkate alınır. | Yalnızca yatay kenarlar dikkate alınır. Dikey kenarlar, belirtilirse, düzeni etkilemez. Kapladığı dikey alan, line-height'a bağlıdır, border ve padding görsel olarak içeriğin etrafında görünse bile. | | Float | - | - | Dikey kenar boşluklarını ve dolguları ayarlayabileceğiniz bir block öğesi gibi olur. |

Konumlandırılmış bir öğe, hesaplanmış position özelliği relative, absolute, fixed veya sticky olan bir öğedir.

• static - Varsayılan konum; öğe normalde olduğu gibi sayfaya akacaktır. top, right, bottom, left ve z-index özellikleri uygulanmaz.
• relative - Öğenin konumu, düzeni değiştirmeden (ve böylece öğenin olması gereken yerde bir boşluk bırakarak) kendisine göre ayarlanır.
• absolute - Öğeyi sayfa akışından çıkarır ve varsa en yakın konumlandırılmış üst öğesine göre veya aksi takdirde başlangıç kapsayan bloğuna göre belirli bir konumda konumlandırır. Kesin olarak konumlandırılmış kutuların kenar boşlukları olabilir ve diğer kenar boşluklarıyla çakışmazlar. Bu öğeler diğer öğelerin konumunu etkilemez.
• fixed - Öğeyi sayfa akışından çıkarır ve görünüm alanına göre belirli bir konumda konumlandırır ve kaydırıldığında hareket etmez.
• sticky - Yapışkan konumlandırma, göreli ve sabit konumlandırmanın bir melezidir. Öğeye, belirtilen bir eşiği geçene kadar relative olarak konumlandırılmış gibi davranılır, bu noktada fixed olarak konumlandırılmış gibi davranılır.

• Bootstrap - Yavaş sürüm döngüsü. Bootstrap 4 neredeyse 2 yıldır alfada. Çok kullanılan bir döndürme düğmesi bileşeni ekleyin.
• Semantic UI - Kaynak kodu yapısı tema özelleştirmeyi anlamayı son derece zorlaştırıyor. Geleneksel olmayan tema sistemi özelleştirmek için bir çile. Tedarikçi kütüphanesinde sabit kodlu yapılandırma yolu. Bootstrap'teki gibi değişkenleri geçersiz kılmak için iyi tasarlanmamış.
• Bulma - Çok sayıda anlamsız ve gereksiz sınıf ve işaretleme gerektirir. Geriye dönük uyumlu değil. Sürümleri yükseltmek uygulamayı ince şekillerde bozar.

Evet. Flexbox temel olarak 1 boyutlu düzenler için, Grid ise 2 boyutlu düzenler içindir.

Flexbox, CSS'te öğelerin bir kapsayıcı içinde dikey hizalanması, yapışkan altbilgi vb. gibi birçok yaygın sorunu çözer. Bootstrap ve Bulma Flexbox tabanlıdır ve bugünlerde düzenler oluşturmak için muhtemelen önerilen yoldur. Daha önce Flexbox'ı denedim ancak flex-grow kullanırken bazı tarayıcı uyumsuzluk sorunlarıyla (Safari) karşılaştım ve kodumu inline-blocks ve genişlikleri yüzdelerle hesaplamak için matematik kullanarak yeniden yazmak zorunda kaldım, hoş bir deneyim değildi.

Grid, ızgara tabanlı düzenler oluşturmak için açık ara en sezgisel yaklaşımdır (daha iyi olmalı!) ancak tarayıcı desteği şu anda geniş değildir.

Bu iki yaklaşımın birbirini dışlamadığını unutmayın.

Bir web sitesini duyarlı hale getirmek, bazı öğelerin cihazın ekran boyutuna, genellikle görünüm alanı genişliğine göre, CSS medya sorguları aracılığıyla boyutunu veya diğer işlevselliğini ayarlayarak yanıt vermesi anlamına gelir, örneğin daha küçük cihazlarda yazı tipi boyutunu küçültmek gibi.

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

Mobil öncelikli bir strateji de duyarlıdır, ancak mobil cihazlar için tüm stilleri varsayılan olarak tanımlamamız ve diğer cihazlar için yalnızca belirli duyarlı kurallar eklememiz gerektiği konusunda hemfikirdir. Önceki örneği takip ederek:

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

Mobil öncelikli stratejinin 2 ana avantajı vardır:

• Mobil cihazlarda daha performanslıdır, çünkü onlar için uygulanan tüm kuralların herhangi bir medya sorgusuna karşı doğrulanması gerekmez.
• Duyarlı CSS kurallarına saygı göstererek daha temiz kod yazmaya zorlar.

Hem duyarlı hem de uyarlanabilir tasarım, farklı görünüm alanı boyutları, çözünürlükler, kullanım bağlamları, kontrol mekanizmaları vb. için ayarlama yaparak kullanıcı deneyimini farklı cihazlarda optimize etmeyi amaçlar.

Duyarlı tasarım esneklik prensibine göre çalışır - her cihazda iyi görünebilen tek bir akışkan web sitesi. Duyarlı web siteleri, medya sorgularını, esnek ızgaraları ve duyarlı görüntüleri kullanarak birçok faktöre göre esneyen ve değişen bir kullanıcı deneyimi yaratır. Tıpkı birkaç farklı çemberden geçmek için büyüyen veya küçülen tek bir top gibi.

Uyarlanabilir tasarım, aşamalı geliştirmenin modern tanımına daha çok benzer. Tek bir esnek tasarım yerine, uyarlanabilir tasarım cihazı ve diğer özellikleri algılar ve ardından önceden tanımlanmış bir görünüm alanı boyutları ve diğer özellikler kümesine dayalı olarak uygun özelliği ve düzeni sağlar. Site, kullanılan cihazın türünü algılar ve o cihaz için önceden ayarlanmış düzeni sunar. Birkaç farklı boyuttaki çemberden geçen tek bir top yerine, çember boyutuna bağlı olarak kullanılacak birkaç farklı topunuz olurdu.

Her iki yöntemin de tartılması gereken bazı sorunları vardır:

• Duyarlı tasarım oldukça zorlayıcı olabilir, çünkü esasen tüm durumlar için tek bir duyarlı düzen kullanıyorsunuz. Medya sorgusu kesme noktalarını nasıl ayarlayacağınız bu zorluklardan biridir. Standart kesme noktası değerlerini mi kullanırsınız? Yoksa, belirli düzeninize uygun kesme noktalarını mı kullanırsınız? Peki ya o düzen değişirse?
• Uyarlanabilir tasarım genellikle kullanıcı aracısı koklama veya DPI algılama vb. gerektirir, bunların hepsi güvenilmez olabilir.

Retina terimi, piksel oranı 1'den büyük yüksek çözünürlüklü ekranları ifade eden bir pazarlama terimidir. Bilinmesi gereken önemli nokta, bu ekranların öğeleri aynı boyutta göstermek için daha düşük çözünürlüklü bir ekranı taklit etmesidir. Günümüzde tüm mobil cihazları retina varsayılan ekranlar olarak kabul ediyoruz.

Tarayıcılar varsayılan olarak DOM öğelerini, görüntüler hariç, cihaz çözünürlüğüne göre render eder.

Retina ekranların en iyi şekilde yararlanmasını sağlayan net, iyi görünümlü grafiklere sahip olmak için mümkün olduğunca yüksek çözünürlüklü görüntüler kullanmamız gerekir. Ancak her zaman en yüksek çözünürlüklü görüntüleri kullanmak, daha fazla baytın ağ üzerinden gönderilmesi gerektiği için performans üzerinde olumsuz bir etki yaratacaktır.

Bu sorunu aşmak için HTML5'te belirtildiği gibi duyarlı görüntüleri kullanabiliriz. Bu, aynı görüntünün farklı çözünürlük dosyalarını tarayıcıya sunmayı ve tarayıcının srcset HTML niteliğini ve isteğe bağlı olarak sizes kullanarak hangi görüntünün en iyi olduğunu seçmesini gerektirir, örneğin:

<div responsive-background-image>
  <img
    src="/images/test-1600.jpg"
    sizes="
      (min-width: 768px) 50vw,
      (min-width: 1024px) 66vw,
      100vw"
    srcset="
      /images/test-400.jpg   400w,
      /images/test-800.jpg   800w,
      /images/test-1200.jpg 1200w
    " />
</div>

HTML5'in srcset'ini desteklemeyen tarayıcıların (yani IE11) onu göz ardı edip yerine src'yi kullanacağını belirtmek önemlidir. IE11'i gerçekten desteklememiz ve performans nedenleriyle bu özelliği sağlamak istememiz durumunda, bir JavaScript polyfill'i kullanabiliriz, örneğin.

Simgeler için de, çözünürlükten bağımsız olarak çok net render ettikleri için mümkün olduğunca SVG ve simge fontlarını kullanmayı tercih ederdim.

translate(), CSS transform'ın bir değeridir. transform veya opacity değiştirmek tarayıcı yeniden akışını veya yeniden boyamasını tetiklemez ancak birleşimleri tetikler; oysa mutlak konumlandırmayı değiştirmek reflow'u tetikler. transform tarayıcının öğe için bir GPU katmanı oluşturmasına neden olur, ancak mutlak konumlandırma özelliklerini değiştirmek CPU'yu kullanır. Bu nedenle translate() daha verimlidir ve daha akıcı animasyonlar için daha kısa boyama süreleri sağlar.

translate() kullanıldığında, öğe hala orijinal alanını kaplar (biraz position: relative gibi), mutlak konumlandırmayı değiştirmede olduğu gibi değildir.