HTML/CSS ile dinamik yapılar oluşturmak!

Merhaba,

Günümüz HTML kodlamada en temel yapıları kurup sonrasında js ile ilgili alanları dinamikleştiriyoruz. Aslında HTML/CSS ile minimal düzeyden çok karmaşık olaylara kadar dinamik yapılar oluşturmak pekala mümkün.

CSS'in gücü

Hemen örneklere geçelim.

Herkesin bildiği CSS de ki :hover durumu, bunun yanında ihtiyaca göre kullanılabilecek şunlarda vardır;

:focus

:active

:visited

:focus-within

:focus-visible

:focus da yerine göre çok kullanılır ancak diğerleriyle belki çoğunuzun hiç işi olmamıştır. Ancak olayımız bunlar değil...

Tüm olay input'un :checked değerinde bitiyor.

Misal input'un :checked olma durumunu bir if else gibi düşünebilirmiyiz?

Biraz daha derine inelim. <input type="checbox"> bu input'un :checked olma durumuna göre CSS yazalım.

//HTML

<input type="checkbox">
<div class="st"><p>1</p></div>
<div class="nd"><p><span>2</span></p></div>

//CSS

input~.st{ display: block; }
input~.nd{ display: none; }
input:checked~.st{ display:none; }
input:checked~.nd{ display:block; }

Yukarıdaki örnekte input'un :checked olma durumuna göre birini ve ikinci divler arasında göster gizle gibi basit bir olayı ele aldık.

Burada çok dikkat edilmesi gereken husus şudur. Bildiğiniz üzere HTML ve CSS de okumayı soldan sağa doğru yapar, CSS de ise kendisine ve kendisinden sonrakilere stilleme yapabiliriz. Bu da bizim inputun :checked olma durumuna göre stilleme yapmamıza olanak tanır. Önemli kural şudur, HTMLdeki bir elemente stilleme verirken o elementin içindekilere de erişebilirsiniz, bunun yanında elementten sonraki kardeşlerine de erişebilir hatta o kardeşlerin altındaki elemanlara da erişebilirsiniz.

Örneğimiz üzerinden cevabı pekiştirmek gerekirse, input~.st yazımı şu demektir = input var ise .st sınıfını display:block; yap. .st sınıfının kardeş sırasının öncesinde input yok ise bu stilleme çalışmayacaktır. Kardeş olmaları yani aynı dizinde olmaları önemlidir ve inputun .st sınıfından önce olması gerekir. Tilda kullandığımız için inputtan sonra arada başka sınıflar etiketler olabilir. Ortalığı biraz daha karıştıralım...

Biraz HTML daima CSS

//HTML

<input type="checkbox">
<div class="orta-lik karisti"></div> //sakın böyle sınıflar kullanmayın projelerinizde... burada nasıl sınıf yazılmaz onu gösteriyorum.
<div class="st"><p>1</p></div>
<div class="nd"><p><span>2</span></p></div>

//CSS

input~.st{ display: block; }
input~.nd{ display: none; }
input:checked~.st{ display:none; }
input:checked~.nd{ display:block; }

Yukarıdaki örnek bir önceki örneğin aynısı sadece .st sınıfı ile input arasına bir sınıf daha ekledim, bu şekilde de yazdığımız CSS çalışacaktır. Eğer tilda '~' yerine '+' kullandıysanız son örneğimizde çalışmaz. Çünkü '+' kullanımı hemen kendisinden sonrasını ifade eder. Bunada bir örnek yazalım...

//HTML

<input type="checkbox">
<div class="orta-lik karisti"></div> //sakın böyle sınıflar kullanmayın projelerinizde... burada nasıl sınıf yazılmaz onu gösteriyorum.
<div class="st"><p>1</p></div>
<div class="nd"><p><span>2</span></p></div>

//CSS

input+.st{ display: block; }
input+.st+.nd{ display: none; }
input:checked~.st{ display:none; }
input:checked~.nd{ display:block; }

Yine aynı örnek üzerinden ilerleyip Tildaları Artı yaptım. inputtan sonra başka bir sınıf olduğu için bu yol ile yazılmış cssler çalışmayacaktır. Eğer bu yöntem ile çalışacaksanız elinizi Tilda'~' ya alıştırın kesinlikle tavsiye ederim. Yerine göre '+' da kullanılır ancak bu yöntem için Tilda '~' en iyisidir.

Şimdi olayı biraz daha derinleştirelim.

Biz şu ana dek sadece <input type="checkbox"> dan bahsettik. :checked olma durumuna göre aslında if else yazıyoduk.

Birde <input type="radio"> var:) birden fazla tpye="radio" kullanıp bir yapı elde edersek bunuda switch case gibi düşünebilirz:) input type="radio" ile çok güzel tab menü yapabilirsiniz...

Hemen bir örnek yapalım.

<input type="radio" id="tab-menu-1" name="tabMenu" checked>
<input type="radio" id="tab-menu-2" name="tabMenu">
<input type="radio" id="tab-menu-3" name="tabMenu">
<input type="radio" id="tab-menu-4" name="tabMenu">
<nav>
	<label class="tab-menu-1" for="tab-menu-1">SVG</label>
	<label class="tab-menu-2" for="tab-menu-2">PNG</label>
	<label class="tab-menu-3" for="tab-menu-3">JPG</label>
	<label class="tab-menu-4" for="tab-menu-4">PDF</label>
</nav>
<section>
	<article class="tab-article-1">SVG</article>
	<article class="tab-article-2">PNG</article>
	<article class="tab-article-3">JPG</article>
	<article class="tab-article-4">PDF</article>
</section>
<style>
    input {position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
    input#tab-menu-1:checked~nav label.tab-menu-1,
    input#tab-menu-2:checked~nav label.tab-menu-2,
    input#tab-menu-3:checked~nav label.tab-menu-3,
    input#tab-menu-4:checked~nav label.tab-menu-4 {background:black;color:white;}
    input#tab-menu-1:checked~section article.tab-article-1,
    input#tab-menu-2:checked~section article.tab-article-2,
    input#tab-menu-3:checked~section article.tab-article-3,
    input#tab-menu-4:checked~section article.tab-article-4 {display: block;}
    nav {display:flex;flex-wrap:wrap;gap:5px}
    nav label {display:block;padding:5px 15px;font-size:24px;cursor:pointer;transition:.4s;}
    nav label:hover {background:black;color:white;}
    section {padding:10px}
    article {display:none;font-size:20px}
</style>

Tüm örneği HTML içerisinde verdim doğrudan copy paste yaparak deneyebilirsiniz.

Örneği incelemek gerekir ise;

4 tane input type="radio" ekledim, radio özelliğinde eğer name değerleri aynı ise sadece biri seçilebilir olduğundan hangisi seçili ise ona göre hem nav içerisinde hemde article'lar da değişiklik yapacağım.

Öncelikle tüm article etiketlerini gizledim. Çünkü input seçili ise göster diyeceğim. Bu yüzden 1. inputu :checked yaptım. Siz de istediğinizi checked yapıp istediğinizden başlayabilirsiniz. Sadece 1 tanesinin :checked olduğuna emin olun. inputlardan hangisi :checked ise ilgili label'ın backgorund'ı değişir ve ilgili article görünür olur.

Muhtişim ikili(Mor Fil ve Sarıbıyık)

SCSS gibi yapılar kullanıyorsanız bu tip yapılarda @for döngüsü kullanıp CSS yazımınızı bir hayli kısaltabilirsiniz..

Bu ve bunun gibi bir sürü sadece CSS ile yapılabilecek zibilyon tane örnek şimdiden bulabilirsiniz. Ayrıca bkz. ibrahimmesutyilmaz.com bu sitede javascript kullanılmamıştır.

CSS yazdığınızda bilgisayar bunu ekran kartına çizdirir. Eğer ekran kartı yok ise işlemi chipset yapar. Aynı olayı JS ile yaparsanız bu sefer işlemci çalışır. Eskiden bu gibi detaylar biraz önemli idi. Şu an bu tip bir detay önemli olmasada JS nin sorun çıkardığı yerde muhtişim ikili(HTML/CSS) ile sorunlarınızı çözebilirsiniz. Buradan Morfil ve Sarıbıyık'a selam olsun:)

İyi çalışmalar dilerim