CSS (Cascading Style Sheets), web sayfalarını görsel olarak biçimlendirmek için kullanılan güçlü bir araçtır. CSS ile bir web sayfasındaki belirli öğeleri hedef alarak, onların görünümünü ve davranışını değiştirebilirsiniz. Bu yazıda, .page .entry-meta, .page .posted-on, .page .entry-date, .page .date { display: none; } kodunun ne yaptığına ve nasıl kullanıldığına detaylı bir şekilde bakacağız.
display ÖzelliğiCSS seçicileri, belirli HTML öğelerini hedef almak için kullanılır. Bu kod parçasında birden fazla seçici kullanılmıştır:
.page: class="page" özniteliğine sahip herhangi bir HTML öğesini hedefler..entry-meta: class="entry-meta" özniteliğine sahip herhangi bir HTML öğesini hedefler..posted-on: class="posted-on" özniteliğine sahip herhangi bir HTML öğesini hedefler..entry-date: class="entry-date" özniteliğine sahip herhangi bir HTML öğesini hedefler..date: class="date" özniteliğine sahip herhangi bir HTML öğesini hedefler.Seçiciler virgül ile ayrıldığında, her bir seçici bağımsız olarak uygulanır ve her birinin hedeflediği öğelere aynı stil kuralları uygulanır.
display ÖzelliğiCSS’nin display özelliği, bir HTML öğesinin nasıl görüntüleneceğini kontrol eder. display: none; değeri, hedeflenen öğeyi tamamen gizler. Bu, öğenin DOM (Document Object Model) içinde var olmaya devam ettiği, ancak tarayıcı tarafından render edilmediği ve kullanıcı tarafından görülemediği anlamına gelir.
.page .entry-meta, .page .posted-on, .page .entry-date, .page .date { display: none; }Bu kod parçası, .page sınıfına sahip bir öğe içindeki tüm .entry-meta, .posted-on, .entry-date ve .date sınıflarına sahip öğeleri gizler. İşte bu kodun işleyişi ve ne işe yaradığı hakkında detaylı açıklama:
.page sınıfına sahip bir öğe içindeki .entry-meta, .posted-on, .entry-date ve .date sınıfına sahip tüm öğeler hedeflenir. Bu, sadece bu sınıflara sahip öğeleri değil, yalnızca .page sınıfı içinde bulunanları etkiler.display: none; özelliği, bu seçicilerle hedeflenen öğelerin tamamen gizlenmesini sağlar. Bu öğeler, DOM içinde var olmaya devam eder, ancak tarayıcı bu öğeleri render etmez, yani kullanıcı bu öğeleri görmez.Bu tür bir stil kuralı, özellikle aşağıdaki durumlarda kullanışlı olabilir:
Bir örnekle açıklayalım:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display None Example</title>
<style>
.page .entry-meta,
.page .posted-on,
.page .entry-date,
.page .date {
display: none;
}
</style>
</head>
<body class="page">
<header>
<h1 class="entry-title">Welcome to My Blog</h1>
<div class="entry-meta">Published by John Doe</div>
<div class="posted-on">Posted on June 18, 2024</div>
</header>
<article class="post">
<h2 class="entry-title">First Blog Post</h2>
<div class="entry-date">June 17, 2024</div>
<p>This is the content of the first blog post.</p>
</article>
<article class="post">
<h2 class="entry-title">Second Blog Post</h2>
<div class="date">June 16, 2024</div>
<p>This is the content of the second blog post.</p>
</article>
</body>
</html>
Bu örnekte, .page sınıfına sahip body öğesi içindeki tüm .entry-meta, .posted-on, .entry-date ve .date öğeleri gizlenecektir. Sonuç olarak, tarayıcıda bu öğeler görüntülenmeyecektir.
.page .entry-meta, .page .posted-on, .page .entry-date, .page .date { display: none; } kodu, CSS kullanarak belirli öğeleri hedef alıp gizlemenin etkili bir yoludur. Bu, web sayfalarınızı daha düzenli ve kullanıcı dostu hale getirmek için güçlü bir araçtır. Özellikle karmaşık web projelerinde, gereksiz veya tarih bilgisi gibi belirli bilgileri gizlemek ve kullanıcı deneyimini optimize etmek için bu tür CSS kurallarını kullanabilirsiniz.