Bugün kullanabileceğiniz kıymetli, güçlü ve sağlam CSS.
Her kullanıcı arabirimi geliştiricisinin, :has()
ürününün bir "üst seçiciden" çok daha fazlasını bilmesi gerektiğini düşünüyorum.
bir subgrid
nasıl ve neden, yerleşik CSS söz dizimiyle nasıl iç içe geçilir,
başlık metni kaydırma ve kapsayıcı sorgu birimlerinin nasıl kullanıldığı gibi konuları ele aldık.
Bu gönderi, her kullanıcı arabirimi geliştiricilerin 2023'te bilmesi gereken geçen yılın 6 CSS snippet'i.
CSS:has(.potential-beyond-being-a-parent-selector)
:has()
:has()
, 2023'ün sonunda tüm büyük tarayıcılarda kullanıma sunuldu. Bu yeni seçici görünüyor
küçük ve masum bir araç olarak görebilirsiniz. Ancak aşağıdaki
kullanım alanlarına karşı sizi şaşırtabilir:
oyun, reaktiflik, içeriğe duyarlı düzen, akıllı bileşenler ve
daha fazla bilgi edinip bunu Jhey'in bu makalesinde bulabilirsiniz.
![Her biri bir resim ve başlık içeren 4 panel gösterilmektedir.
Her resimde, beyin giderek daha fazla beyin gücü etkinleşiyor. İlk panel
:has() diyor. İkinci panelde ana seçici olarak şekil:has(caption) yer alıyor.
Üçüncü panelde miktar seçici olarak .layout:has(> :nth-child(5)) ifadesi gösterilir.
Birinci panelde, koşullu konu değiştirme seçicisi olarak html:has(#checked) .new-subject yazıyor.](/static/articles/5-css-snippets-every-front-end-developer-should-know-in-2024/image/has-meme.jpg)
:has()
öğesini üst seçici olarak kullanmaya ilişkin birkaç örneği burada bulabilirsiniz. Bu ismi aldığı için
genellikle bir seçicinin konusu sondadır. Örneğin ul li
, li
öznedir.
ve stilleri alıyor. :has()
ile, seçicinin başındaki öğe
çok önemlidir. Aşağıdaki örnekte, düğmenin içinde bir öğe varsa düğmede boşluk vardır
.icon
sınıfında. İçinde bir resim varsa kartın yönü değişir.
button:has(.icon) {
gap: 1ch;
}
.card:has(img) {
grid-auto-flow: row;
}
Bir düzeni, sahip olduğu öğe sayısına göre değiştirmek, uzun süredir tercih edilen bir seçicidir. Bu artık mümkün
:has()
ile değiştirin. Çünkü alt öğe sayısını sorgularken kapsayıcıyı konu olarak tutabilir.
main:has(> :nth-child(5)) {…}
Başka bir üst düzey örnek: Dokümanın tamamında ayarlanan stilleri değiştirme sayfadaki belirli bir onay kutusu etkinleştirildiğinde:
html:has(#dark-mode:checked) {…}
Bunlar, örneklere bakarsanız seçicinin konusunu değiştirmeyen basit kullanım alanlarıdır
Bunun gibi durumlarda :has()
yalnızca ebeveyn seçici olarak kullanılabilir. Aşağıdakileri göz önünde bulundurun
bazı örnekler vardır. Bunlar, ortak bir üst öğeye dayanan bir şeyi kontrol eder ve ardından seçiciyi
sayfada daha alt kısımlarında bir yerde
görünüyor.
Bu giriş, girişlerinden herhangi biri geçersizse form hatası öğesini gösterir:
form:has(:user-invalid) .error {
display: block;
}
Burada, yan gezinmenin .--is-open
sınıfı olduğunda ana içerik alanı kaydırılır:
html:has(#sidenav.--is-open) main {
translate: -320px;
}
Burada, üst seçici olarak :has()
özelliğinin kullanıldığı eğlenceli bir demoyu inceleyebilirsiniz. :has()
ile miktar sorguları
görsel olarak zarif bir şekilde görüntülenebilen bir ızgara düzeni oluşturmak için
Dikey veya yatay yönde 1-12 öğe:
Alt ızgara oluştur
subgrid
Uzun yıllar boyunca kullanıcı arabirimi web topluluğu, çözümü tamamlamak ve son derece popüler ve güçlü CSS ızgara düzeni motoru. Artık üç büyük motorun hepsinde kullanılabiliyor.
Genel bakış isterseniz alt tablo hakkında daha fazla bilgi edinebilirsiniz.
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
> article {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
CSS yolunu iç içe yerleştirin
nesting
Yerleşik CSS iç içe yerleştirme özelliği, 2023'te başlıca tüm tarayıcılarda kullanıma sunuldu. Hatta web sitemi, iç içe yerleştirmeyi derleyen derleme işlemini kaldıracak şekilde güncelledim ve şimdi bunları oluşturabilirsiniz. Evet, iç içe yerleştirme içeren stil sayfaları daha küçük ve tarayıcı geliştirici araçları bunu temsil etmeye hazır.
CSS iç içe yerleştirme söz dizimiyle ilgili genel bilgileri burada bulabilirsiniz. inceleyebilirsiniz. Aşağıdaki kod örneğinde bir söz dizimi örneği gösterilmektedir.
.you {
.can-totally-ship-this {
&.if-you-wanted {
/* it's VERY MUCH like SCSS */
&:is(:hover, :focus-visible) {
/* put a bird on it */
}
}
}
}
.for-theming {
@media (prefers-color-scheme: dark) {
/* you can nest media queries */
}
}
/* or for theming with [data-theme="dark"] */
.button {
background: black;
color: white;
/* nest and do more than just append, flip it and reverse it */
[data-theme="dark"] & {
background: white;
color: black;
}
}
Tarayıcının başlıkları dengelemesine izin verin
balance
pretty
text-wrap: balance
olmadan geliştiriciler ve metin yazarları satır sonu ipuçlarında kalır
<wbr>
öğeleri veya ­
gibi. Bu çoğu zaman bir kaybeden bir savaştır çünkü nihayetinde
herhangi bir şekilde çevrilmiş, yakınlaştırılmış veya değiştirilmiş olması durumunda, bunların
sarmalama ipuçları, içeriğin yeni sunumu için doğru yere yerleştirilecektir.
Dengeli metin kaydırma sayesinde bu işi tarayıcıda bırakabilirsiniz. Aşağıdaki Codepen'de karşılaştırmayı görebilirsiniz.
Kapsayıcı sorgu birimlerini kullanma
cqw
Geçen yılki gönderide, her kullanıcı arabirimi geliştiricilerin kapsayıcı sorgusudur. Henüz öğrenmediyseniz 2024'e ayak uydurun. ve container sorgu birimlerine de göz atabilirsiniz. Özetle, Ahmad Shadeed, 2021'de kapsayıcı sorgu birimleri hakkında harika bir makale yazdı.
Altı yeni katılım birimi mevcuttur:
- Satır içi varyant
cqi
. cqw
genişlik varyantı.cqb
varyantını engelleme.- Yükseklik varyantı
cqh
. cqmin
daha kısa olan uzunluklara uygun bir varyant.- Daha büyük (
cqmax
) uzunluklarda bir varyant.
Bir kapsayıcıdaki göreli ve içsel animasyonlar için bir senaryo düşünün. Bir alt öğe, 100 cqi kullanılır (bu, kapsayıcı satır içi boyutunun% 100'ü).
@keyframes slide-out-of-container {
to {
translate: -100cqi;
}
}
Aşağıda, kapsayıcıya duyarlı yazı tipi kullanılan bir kart ve Yön yatay ise kapsayıcının yönü yarıya düşecek.
.card {
:is(h2,h3) {
font-size: clamp(1.5rem, 5cqi, 4rem);
}
img {
inline-size: 100cqi;
@container (orientation: landscape) {
inline-size: 50cqi;
}
}
}
Bu birimleri kullanmaya yeni başladıysanız bu birimleri 2024'te kullanabileceğiniz tüm birimleri inceleyin.