CSS

WordPress’te :is() ve :where() ile Daha Basit Blok Aralığı

bu :is() ve :where() sözde seçiciler, parantez içindeki kriterleri karşılayan öğeleri hedeflememize izin veren, CSS’ye nispeten yeni eklemelerdir. Örneğin, kullanarak :is() herhangi birini hedefleyebiliriz p, h2 veya ul sınıfına sahip eleman test:

.test:is(p, h2, ul) {
background: yellow;
}

Bu, yazmaya eşdeğerdir:

p.test,
h2.test,
ul.test
{
background: yellow;
}

Tersine, herhangi birini hedefleyebiliriz h2 Belirtilen sınıflardan herhangi birine sahip olan:

h2:is(.heading-1, .heading-2) {
background: yellow;
}

Bu şuna eşdeğerdir:

h2.heading-1,
h2.heading-2
{
background: yellow;
}

Karmaşık seçicilerle de çalışır. Aşağıdaki hedefler herhangi h2 bu, sınıfına sahip bir öğenin doğrudan çocuğudur. has-red-heading:

h2:is(.has-red-heading > *) {
color: red;
}

:where(), görünüşte, oldukça benzer. Gerçekten de, aynı şekilde kullanabiliriz ve aynı etkiye sahip olacaktır:

h2:where(.heading-1, .heading-2) {
background: yellow;
}

Fark, içindeki seçiciler :where() seçici içerideyken sıfır özgüllüğe sahip :is() genel özgünlüğe katkıda bulunur. Doğrudan alıntı yapmak için MDN:

:where() ve :is() arasındaki fark, :where() her zaman 0 özgüllüğe sahipken, :is() bağımsız değişkenlerinde en spesifik seçicinin özgüllüğünü alır.

Şimdi bunların CSS kodumuzda nasıl faydalı olabileceğine bakalım.

Daha iyi blok stili

saat Atom Parçası, çalıştığım web ajansı, WordPress siteleri oluşturma konusunda uzmanız. WordPress’teki son gelişmeler, tamamen esnek siteler sunmayı her zamankinden daha kolay hale getirdi: Gutenberg blok düzenleyici müşterilere sayfanın herhangi bir yerinde blok ekleme, kaldırma veya yeniden sıralama konusunda tam esneklik sağlar. Ancak aynı zamanda, aralarında uygun boşluk sağlamak için birçok farklı blok tipini şekillendirmek gibi zorluklarla birlikte gelir.

Gutenberg’e genel bakış

Gutenberg blok düzenleyicisiyle oluşturulmuş bir web sayfasında, her “blok”, sayfadaki tek bir sarmalayıcı öğesinin doğrudan çocuğudur. Bazıları başlıklar ve paragraflar gibi basit bloklardır, diğerleri ise eklenen sınıflarla daha karmaşık bileşenlerdir. Aynı şekilde kullanılacak özel bloklar da oluşturabiliriz.

<div class="entry-content">
<!--Heading and paragraph core blocks-->
<h2>Did dinosaurs really exist?</h2>
<p>
Yes. Semper eget duis at tellus at urna condimentum mattis pellentesque.
Donec ac odio tempor orci dapibus ultrices in. In hac habitasse platea
dictumst quisque sagittis purus sit.
</p>

<!--More complex core block-->
<blockquote
class="wp-block wp-block-quote"
id="block-1cfd33a9-706c-4409-8a6e-d381bff67023"
>

<p>
Dinosaurs lived a really long time ago, but they can teach us a lot about
the present day
</p>
</blockquote>

<!--Custom block-->
<div class="as-accordion" id="accordion-block_6065ca0dd7fa1">
<!--...block HTML-->
</div>
</div>

Blok aralığı

Wordpress, Gutenberg blokları arasındaki boşluğu şekillendirmek için bir sürü varsayılan CSS gönderir, ancak genellikle tasarımımıza dayanarak bunu geçersiz kılmak isteriz. Bunu yapmanın kullanışlı bir yolu, lobotomize baykuş seçici içerik sarmalayıcının doğrudan torunları için.

.entry-content > * + * {
margin-top: 1rem;
}

Bu, diğerini takip ettiğinde her blokta bir üst kenar boşluğu belirler. Bu iyi bir başlangıç, ancak bazı bloklar genellikle biraz daha fazla alana ihtiyaç duyar, bu yüzden daha büyük bir margin-top bu bloklar için değer. Atomic Smash’ta kullandığımız şey olan Sass’ı kullanmanın nasıl göründüğü:

.entry-content {
> * + * {
margin-top: 1rem;
}

/* Any block followed by a h2, h3, h4, figure, blockquote or gallery block needs more space above */
> * + h2,
> * + h3,
> * + h4,
> * + figure,
> * + blockquote,
> * + .wp-block-gallery
{
margin-top: 2rem;
}

/* Any block that follows a figure, blockquote or gallery block needs more space above */
> figure + *,
> blockquote + *,
> .wp-block-gallery + *
{
margin-top: 2rem;
}
}

Bu yalnızca bir anlık görüntüdür ve herhangi bir projede farklı kesme noktalarını dikkate almanın yanı sıra daha fazla özel boşluk bırakmamız gerekebilir.

Kullanarak daha özlü hale getirmek için bunu yeniden değerlendirebiliriz. :is():

.entry-content {
> * + * {
margin-top: 1rem;
}

> * + :is(h2, h3, h4, figure, blockquote, .wp-block-gallery),
> :is(figure, blockquote, .wp-block-gallery) + * {
margin-top: 2rem;
}
}

:is() muhtemelen daha iyi bir seçenektir :where() bu durumda, özgüllüğü artırmak ve varsayılan Gutenberg stillerini geçersiz kılmak istediğimiz için.

Aşağıda, kodumuzu daha da kısa tutmamıza yardımcı olabilecek, farklı kesme noktaları için dikey ritmi ölçeklendirmeye yönelik özel özelliklerin yanı sıra, eylem halinde bir demosu yer almaktadır:

Kalemi Gör
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu