Kaplama Elemanları için Yardımcı Sınıf

İşte CSS’de tekrar tekrar yapmam gereken bir şey var: bir öğeyi diğeriyle tamamen kaplamak. Her seferinde aynı CSS: ilk öğe (kapsanması gereken) position: relative ona uygulandı. ikincisi var position: absolute ve dört kenarı da birinci elemanın kenarlarına hizalanacak şekilde konumlandırılır. Tam CSS şöyle görünür:

.original-element {
  position: relative;
}

.covering-element {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Genellikle bir resmi, bazen yarı saydam bir arka plan rengi veya gradyanla kaplaması gereken bir başlık veya resim yazısıdır. (Bunu bir bindirme olarak adlandırırdım.) Genellikle üst üste bindirilen ilk öğenin doğrudan çocuğudur, ancak her zaman değil. Bazen sözde bir öğeyi üst üste bindirmek, hatta belki bir vurgulu durumu için geçiş yapmak veya canlandırmak istiyorum. Her iki durumda da, bunu o kadar sık ​​yapıyorum ki, CSS özelliklerini her seferinde el yazısıyla yazmak yerine, onu kapsayan bir yardımcı program sınıfı oluşturmak mantıklı geliyor.

Yardımcı sınıflar

Yardımcı sınıflar, web uygulama kodumuzdaki herhangi bir öğeye uygulanabilen tek amaçlı sınıflardır. Genellikle (ancak her zaman değil) tek bir CSS özelliği ve değerinden oluşurlar. Giderek daha popüler hale gelen çerçeveler gibi bütün çerçeveler var. Arka rüzgar CSS’si, bu, neredeyse tüm CSS’nizin yardımcı program sınıfları uygulamaktan oluştuğu, yardımcı program öncelikli bir CSS metodolojisini teşvik eder. Böyle aşırı bir yaklaşımı benimsemek istemeyenler için bile, birçok web projesi, işlerin yoluna girmesine yardımcı olmak için bir dizi yardımcı program içerir.

Üst üste bindirilmiş öğemiz için bir yardımcı sınıf birkaç özellik içereceğinden, çoğundan daha ayrıntılıdır. Bununla birlikte, işi yapar.

arayacağımız bir yardımcı program oluşturabiliriz .overlay bir elemanı kaplamak için:

.overlay {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Bir yardımcı program olarak çok esnek olmakla birlikte, position: absolute elemanın konumunu en yakın göreli konum atasına göre ayarlar, bu nedenle ayarlamayı hatırlamamız gerekir. position: relative örtmek istediğimiz öğe üzerinde (ve bunun örtücü öğenin atası olduğundan emin olun).

Çoğu durumda, bindirme olarak kullanmak istediğim öğe doğrudan bir alt öğe veya sözde öğedir, bu nedenle bu durumlarda uygulamak için daha fazla yardımcı program oluşturmak mantıklı olabilir, bu da ayrıca ayarlamamız gerekmediği anlamına gelir. position: relative. Bunun yerine bu üç sınıftan herhangi biri üst öğeye, yani ele almak istediğimiz orijinal öğeye uygulanabilir.

.overlay-child,
.overlay-before,
.overlay-after {
  position: relative;
}

.overlay-child > *,
.overlay-before::before,
.overlay-after::after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Sözde elemanlar için ekstra özelliğe ihtiyacımız var content (bu durumda boş bir dize değeriyle).

Artık üç yardımcı programımız var – overlay-child (doğrudan bir alt öğeyi konumlandırmak için), overlay-before (konumlandırmak için ::before sözde eleman) ve overlay-after (konumlandırmak için ::after sözde eleman), ek olarak overlayBu, kaplamayı yapan öğeyi hedeflemek istediğimizde geçerli olacaktır. Ne zaman kullanabileceğinize dair bir örnek overlay ebeveyn-hedefleme sınıflarından biri yerine, örtü elemanının doğrudan bir alt öğe değil, DOM ağacının aşağısındaki bir alt öğe olması durumudur.

Kalemi Gör
Yer paylaşımı yardımcı program sınıfları Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

İpucu: JavaScript ile en yakın konumlandırılmış üst öğeyi alma

Konu üzerindeyken, karmaşık bileşenler ve mutlak konumlandırma ile uğraşırken, bir haydut position: relative bazen düzen hatalarının bir nedeni olabilir. Hata ayıklamak için genellikle, bize sorunlara neden olan mutlak konumlu öğeye en yakın göreli konumlu atayı bulmak isteriz. Neyse ki, bunu küçük bir JavaScript parçasıyla kolayca yapabiliriz!

Firefox ve Chrome’un geliştirme araçlarında yazarak $0 konsol panelindeki seçili öğeyi döndürür. yazarsak $0.offsetParent, o anda seçili olan öğenin en yakın konumlandırılmış atası döndürülecektir. olup olmadığını daha sonra kontrol edebiliriz. position: relative stiller panelinde. (Veya JavaScript’te kontrol etmek istersek, kullanabiliriz
getComputedStyle($0.offsetParent).position.)

mantıksal özellikler

Bir öğeyi bu şekilde konumlandırmak, yenisinin yardımıyla daha özlü hale gelmek üzeredir. inset Emlak. Bir bölümü CSS Mantıksal Özellikleri Şartname, inset konum özellikleri için etkin bir şekilde bir kısaltmadır top, right, bottom, left. Hikayenin tamamı bu kadar değil – benzer bir şeyi başarmamızı sağlayan yeni mantıksal özelliklere de sahibiz: inset-block-start, inset-block-end, inset-inline-startve inset-inline-end. Varsayılan soldan sağa kullanıyorsak yazma modu bu eşlenecek top, bottom, left, right bu sırayla, ancak diğer yazma modları (aynı zamanda direction özelliği) değerlerin farklı şekilde eşlenmesine neden olur. Şu anda olsa da, sadece ihtiyacımız var inset örtülü elemanımız için özellik.

Yazma modlarına veya mantıksal özelliklere çok aşina değilseniz, bu ilk başta biraz kafa karıştırıcı gelebilir. İşte harika bir açıklayıcı Rachel Andrew tarafından birkaç yıl öncesinden.

Bunun yerine yardımcı program sınıflarımıza geri dönün:

.overlay {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

Bu dört satırı bire indirgeyebiliriz:

.overlay {
  inset: 0;
}

Bunları yardımcı program sınıflarımızda değiştirmek, kodumuzu önemli ölçüde kısaltır:

.overlay-child,
.overlay-before,
.overlay-after {
  position: relative;
}

.overlay-child > *,
.overlay-before::before,
.overlay-after::after {
  position: absolute;
  content: '';
  inset: 0;
}

tarayıcı desteği

yazarken inset yalnızca Chrome ve Firefox’ta desteklenir, bu nedenle üretimde kullanmak istiyorsanız, desteklemeyen tarayıcılar için bir yedek sağlamanız gerekir. Ancak görünüşe göre tarayıcılar, birçoğunun uyguladığı mantıksal özelliklerin gerisinde kalıyor. Mantıksal Özellikler spesifikasyonunun en azından bir kısmı – bu yüzden onu çok yakında kullanabilmeyi bekleyebileceğimizi düşünmek istiyorum!

Grid ile bir alternatif

Olarak Šime Vidas Belirtmeyi ihmal ettiğim bir şey, mutlak konumlandırmaya hiç ihtiyacınız olmayabilir: CSS Izgarasını bir öğeyi diğeriyle kaplamak için de kullanabiliriz! Tarayıcı desteği o kadar iyi değil, ancak eski tarayıcıları desteklemeniz gerekmiyorsa, yalnızca iki satırda en özlü çözümdür. Kod şöyle görünür:

.element {
  display: grid;
}

.overlay {
  grid-area: 1 / 1 / -1 / -1;
}

Kaplamamız tek alt öğeyse, ızgara alanını ayarlamamıza bile gerek yok, ancak başka alt öğeler eklememiz durumunda sırtımızı örtmek iyi bir fikir olabilir – aksi takdirde istenmeyen bir tarafla karşılaşabiliriz. öğelerimiz ızgaraya otomatik olarak yerleştirildiğinde etkiler.

.overlay-child,
.overlay-before,
.overlay-after {
  display: grid;
}

.overlay,
.overlay-child > *,
.overlay-before::before,
.overlay-after::after {
  content: '';
  grid-area: 1 / 1 / -1 / -1;
}

İşte uyarlanmış yardımcı programla bir demo:

Kalemi Gör
Grid ile bindirme yardımcı program sınıfları Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.