Yerel CSS iç içe yerleştirme, CSS kodunuzu basitleştirebilir ve genel kodlama deneyiminizi geliştirebilir.
Tarihsel olarak CSS, birlikte çalışılması zor bir dil olmuştur. CSS ön işlemcileri, CSS ile çalışmayı kolaylaştırdı ve ayrıca döngüler, karışımlar ve daha fazlası gibi ek özellikler sağladı. Yıllar geçtikçe, CSS daha yetenekli hale geldi ve orijinal olarak CSS ön işlemcileri tarafından sunulan bazı özellikleri benimsedi. Böyle bir özellik "iç içe stil" dir.
İç içe stil, geliştiricilerin HTML yapısını yansıtacak şekilde CSS kurallarını iç içe yerleştirmelerine olanak tanır. Bu, HTML öğeleri ve bunlara karşılık gelen stiller arasındaki ilişki görsel olarak belirgin olduğundan, daha düzenli ve okunabilir bir kodla sonuçlanır.
İç İçe Şekillendirme: Eski Yöntem
İç İçe Şekillendirme, birçok modelde bulunan bir özelliktir. Sass gibi CSS ön işlemcileri, Ekran Kalemi ve Daha Az CSS. Sözdizimi bu ön işlemciler arasında farklılık gösterse de, temel kavram tutarlı kalır. Hepsini stilize etmek istiyorsanız h1 içindeki elemanlar div sınıf adı ile konteyner, normal CSS'de şunu yazarsınız:
.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}
Less CSS gibi bir CSS ön işlemcisinde, şu şekilde iç içe stil uygularsınız:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Yukarıdaki kod bloğu, normal CSS uygulamasıyla aynı sonuçları elde eder, ancak kodu okuyan herhangi bir geliştiricinin neler olup bittiğini kavramasını kolaylaştırır. Bu "hiyerarşi" duygusu, CSS ön işlemcilerinin en büyük satış noktalarından biriydi.
Yuvalama ağacı herhangi bir derinliğe sınırlama olmaksızın yuvalanabilir, ancak aşırı derin yuvalama kod ayrıntısına yol açabileceğinden dikkatli olunması önemlidir.
CSS'de Yerel İç İçe Şekillendirme
Tüm tarayıcılar yerel iç içe stil desteği içermez. bu Kullanabilirmiyim... web sitesi, hedef tarayıcınızın bu özelliği destekleyip desteklemediğini kontrol etmenize yardımcı olabilir.
CSS'deki yerel iç içe stil, CSS ön işlemcilerine benzer şekilde çalışır; bu, herhangi bir seçiciyi diğerinin içine yerleştirmenin mümkün olduğu anlamına gelir. Ancak dikkat etmeniz gereken önemli bir fark var. Aşağıdaki kod bloğuna bir göz atın:
html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Nested Styling in CSStitle>
head>
<body>
<divclass="container">
<h1>Hello from the children of planet Earth!h1>
div>
<style>
.container {
background-color: red;
h1 {
color: yellow;
}
}
style>
body>
html>
Yukarıdaki kod bloğunda, sınıf adına sahip div konteyner kırmızı zemin rengine sahiptir. için stil h1 eleman içinde yatıyor .konteyner engellemek. Bu h1 elementin rengi sarıdır. Bu kodu tarayıcıda çalıştırdığınızda, bir şeylerin ters gittiğini fark edebilirsiniz. Tarayıcı, tarayıcıya doğru bir şekilde kırmızı bir arka plan rengi uygular. konteyner div, ancak h1 uygun stile sahip değildir.
Bunun nedeni, iç içe stilin, Less gibi CSS ön işlemcilerine kıyasla CSS'de biraz farklı çalışmasıdır. Yuvalanmış bir ağaçta bir HTML öğesine doğrudan başvuramazsınız. Bunu düzeltmek için bir ve işareti kullanmanız gerekir (&) aşağıda gösterildiği gibi:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
Yukarıdaki kod bloğunda, & üst seçiciye referans görevi görür. işaretinin önüne koyarak h1 öğesi, tarayıcının tüm çocuğu hedeflediğinizi bilmesini sağlamalıdır. h1 üzerindeki elemanlar konteyner div. Kodu tarayıcıda çalıştırdığınızda aşağıdakileri görmelisiniz:
O zamandan beri & bir üst öğeye başvurmak için kullanılan sembol, bir öğenin sözde sınıflarını ve bunun gibi sözde öğelerini hedeflemek oldukça mümkündür:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Hereisapseudoelement.";
}
}
CSS iç içe stilinin uygulanmasından önce, stilleri tarayıcı genişliğine bağlı olarak koşullu olarak uygulamayı hedefliyorsanız, aşağıdaki gibi bir yönteme başvurmanız gerekiyordu:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Tarayıcı sayfayı oluşturduğunda, sayfanın rengini belirler. P tarayıcı genişliğine dayalı öğe. Tarayıcı genişliği 750 pikseli aşarsa gri rengi kullanır; aksi halde varsayılan rengi (siyah) uygular.
Bu uygulama iyi çalışıyor, ancak tahmin edebileceğiniz gibi, özellikle belirli kurallara göre farklı stiller uygulamanız gerektiğinde, işler hızla oldukça ayrıntılı hale gelebilir. Artık yuva yapmak mümkün medya sorguları doğrudan bir öğenin stil bloğunda.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
Bu kod bloğu temelde bir öncekiyle aynı şeyi yapar, ancak anlaşılması kolay olma avantajına sahiptir. Yalnızca medya sorgusuna ve iç içe geçen üst öğeye bakarak, tanımlanan koşullar karşılandığında tarayıcının uygun stilleri nasıl uygulayacağını anlayabilirsiniz.
İç İçe CSS Stilleriyle Web Sitesi Tasarlama
Şimdiye kadar öğrendiğiniz her şeyi uygulamaya koymanın zamanı geldi. basit bir web sitesi oluşturma ve CSS'deki iç içe stil özelliğinden yararlanma. Bir klasör oluşturun ve istediğiniz gibi adlandırın. Bu klasörde bir index.htm ve bir stil.css dosya.
İçinde index.htm dosyasına aşağıdaki standart kodu ekleyin:
html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="style.css" />
<title>Simple Websitetitle>
head>
<body>
<divclass="container">
<divclass="article">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.h1>
<divclass="meta-data">
<spanclass="author">David Uzonduspan>
<spanclass="time">3 hours agospan>
div>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ut
quasi hic sint dolorum sapiente magni ratione? Suscipit commodi ad,
asperiores nostrum natus aperiam et alias, officiis dolorum ipsa vero
minima consequatur recusandae quasi aliquid quibusdam ducimus eaque!
Excepturi voluptas eveniet nemo, earum doloribus, soluta architecto
iste repellat autem aspernatur beatae ut quis odio est voluptates sunt
qui rerum blanditiis minus! Rerum labore nobis, odit quod amet dolorum
quae laudantium.
div>
div>
<divclass="sidebar">
<h2>Trending Articlesh2>
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, iusto ipsum!h4>
div>
div>
body>
html>
Yukarıdaki kod bloğu, sahte bir haber sitesi için işaretlemeyi tanımlar. Ardından, stil.css dosyasını açın ve aşağıdaki kodu ekleyin:
.container {
display: flex;
gap: 25px;@media(max-width: 750px) {
flex-direction: column;
}.article{
width:90%;
}& div:nth-child(3) {
text-align: justify;
}& span {
color: rgb(67, 66, 66);&:nth-child(1)::before {
font-style: italic;
content: "Writtenby ";
}&:nth-child(2) {
font-style: italic;
&::before {
content: " ~ ";
}
}
}.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
}
}
Yukarıdaki kod bloğu, web sitesini tamamen CSS iç içe stiliyle biçimlendirir. bu .konteyner seçici kök derinliği olarak işlev görür. kullanarak bu seçiciye referans verebilirsiniz. & sembol. Kodu tarayıcıda çalıştırdığınızda aşağıdakileri görmelisiniz:
Hala Bir CSS Ön İşlemcisine İhtiyacınız Var mı?
İç içe stillerin yerel CSS'ye girmesiyle, CSS ön işlemcileri gereksiz görünebilir. Ancak, CSS ön işlemcilerinin iç içe stil vermekten daha fazlasını sunduğunu akılda tutmak çok önemlidir. Döngüler, karışımlar, işlevler ve daha fazlası gibi özellikler sağlarlar. Son olarak, bir CSS ön işlemcisi kullanıp kullanmamak sizin özel kullanım durumunuza ve kişisel tercihlerinize bağlıdır.