Karmaşık, esnek düzenler oluşturmak hiç bu kadar kolay olmamıştı, ancak CSS3 kesinlikle baş ağrısını çoktan ele geçirdi.
CSS3 gibi özellikler flexbox'a ve Sütunlar bazı karmaşık düzenleri gerçek bir olasılık haline getirdi ve şimdi web tasarımcısının araç kutusuna eklenen en yeni eklentilerden biri: CSS Bölgeleri.
CSS Bölgeleri, içeriği tek bir sayfada bir dizi kapsayıcıya aktarabilmenizi sağlar. Bu, InDesign gibi bir uygulamada metin kutularını birbirine bağlamanın karşılığıdır. Önceden sadece veri ve stilleri arasındaki çizgiyi bulanıklaştırarak mümkün olan bazı düzenleri mümkün kılar.
Her zaman olduğu gibi, tarayıcı desteği mükemmel olmaktan uzaktır.
CSS Bölgeleri hala bir taslaktır, yani deneyseldir. İlk başta bunu destekleyen tek tarayıcı Internet Explorer 10'du (hayır, şaka yapmıyorum); IE10, içerik kaynağı olarak bir iframe kullanır.
Safari, bir önekle destek sunmayı iddia ediyor.
Chrome'da, tarayıcınızı açarak, 'about: flags' yazıp 'enable-experimental-webkit-features' özelliğini etkinleştirerek ve ardından tarayıcınızı yeniden başlatarak özelliği test edebilirsiniz.
Mutlu bir de var JavaScript polyfill Adobe tarafından oluşturulan ve şu anda desteklemeyen tarayıcılara CSS Bölgeleri'nin işlevselliğini getiren, bunu github.
CSS Bölgelerinin amacı metnin farklı kaplarda akmasına izin verdiğinden, ihtiyacınız olan ilk şey bazı metinlerdir:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus imperdiet purus ac eleifend. Vivamus posuere pellentesque nibh vel laoreet. Donec et sem odio. Donec sit amet lorem hendrerit, faucibus libero et, mattis lacus. Suspendisse dapibus rutrum felis quis interdum. Integer tincidunt, orci at condimentum placerat, est nulla sollicitudin velit, vitae gravida nisi odio ac ligula. Sed hendrerit ac massa vel ultricies. Vestibulum commodo, orci et tincidunt laoreet, enim tellus aliquet orci, quis dapibus sapien tellus eu felis. Etiam non arcu at eros luctus consectetur vitae eget nunc. In felis ipsum, vehicula ac mauris vel, porttitor gravida neque.Quisque orci turpis, aliquam vel tortor convallis, ullamcorper molestie nisl. Sed aliquet dignissim lorem non fringilla. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue erat ac hendrerit ullamcorper. Morbi facilisis urna nunc, eget pretium lectus congue vitae.Ve sonra bazı kaplar:
Şimdi temel içeriğe sahibiz, konteynırları akış- akışını ve akışını kullanarak bağlayabiliriz, -webkit- önekini eklediğim örnekte farkedeceksiniz.
.text {-webkit-flow-into: text-flow;padding: 0;margin: 0;color: #F2F2F2;font-family: helvetica, arial;font-size: 16px;line-height: 22px;}.containers{-webkit-flow-from: text-flow;background: #333333;padding: 5px;margin-top: 100px;width: 200px;height: 300px;float: left;margin-right: 20px;}Bunu bir tarayıcıda kontrol ederseniz, metnin bir kutudan diğerine akacağını görürsünüz. Şimdi bu kapsayıcıları yerleştirirseniz, metin düzgün şekilde akmaya devam eder.
-webkit-flow-into: text-flow;Bu özellik, değer olarak bir tanımlayıcıyı kabul eder. Bu özelliğe bir değer ilettiğinizde, adlandırılmış bir akışın parçası olur ve sayfa akışının bir parçası olarak oluşturmayı durdurur. Özelliği yok olarak ayarlayarak bunu iptal edebilirsiniz.
Kullandığınız akışın adı keyfi, sadece tutarlı olduğundan emin olun. Yukarıdaki örneğimizde olduğu gibi aynı adlandırılmış akışa sahip birden çok öğeye de sahip olabiliriz.
Bu metinle sınırlı değildir, ayrıca görüntüleri, listeleri ve diğer birçok HTML içeriğini aktarabiliriz.
-webkit-flow-from: text-flow;Belirtilen akışı hangi öğenin / öğelerin alması gerektiğini belirtmek için bu özelliği kullanırız.
Değer, akış özelliği için belirttiğimiz akışın adıdır.
Orijinal metne uyguladığınız tüm içerik stillerinin akış boyunca korunacağını unutmayın. Yani metni maviyse, tüm kaplarda mavi kalır.
Eylemdeki CSS Bölgeleri örneğini görmek için bir göz atın. bu kalem Ben YARATTIM.
CSS Bölgeleri için tarayıcı desteği şu anda zayıftır ve günlük olarak dayanabilmemiz için daha uzun bir yol vardır. Ancak, sunduğu esneklik harika ve tam destek sağlandığında, CSS Bölgelerinin gelecek yıllar için gitmesi gereken bir teknik olacağını düşünüyorum.
CSS Bölgeleri tarafından heyecanlı mısınız? Ne zaman onları kullanabileceğimizi düşünüyorsun? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, şelale görüntüsü cuatrok77 üzerinden.