Son on yıldır Web için tasarım yapıyorsanız, şüphesiz CSS float özelliğine aşina olursunuz. Endüstri (şükür) tableless paftalar prensibini benimsemesinden bu yana, web sayfalarımızı düzenlemek için çoğumuz kullandığımız, ancak en iyi seçim olan şamandıralar;
Bu yöntemin popülaritesine rağmen düzenli olarak yeni tasarımcılar için hayal kırıklığı ve kafa karışıklığına neden oluyor ve yüzer elemanlar “belirsiz” bırakıldığında sorun haline geliyor. Bu temizlenmemiş şamandıralar, özensiz estetikten erişilememeye kadar çeşitli sorunlara neden olabilir. Küçük bir proje ile bir float sorunu çekmek için oldukça basit ama dinamik içerikli büyük bir web uygulamasında çalışırken, değerli zaman yemek ve size para harcayarak biraz fazla trickier olabilir.
Doğru kullanıldığında bile, yüzer normal akış Beklenmeyen davranışlara ve stil sınırlama seçeneklerine neden olabilecek bir belgenin. Bir şamandıra 'normal akış' içinde olmadığından, şamandıra kutusundan önce ve sonra oluşturulan konumlandırılmamış blok kutuları, şamandıra varmış gibi dikey olarak akar. Boyutların dinamik olduğu ve mevcut alanı doldurmak için aktığı duyarlı tasarım ile bu idealden uzaktır. Ya daha iyi bir yolu olsaydı?
flexbox'a web düzenlerinin heyecan verici geleceğidir, ancak eski tarayıcıları desteklememiz gerekenler için, bu hala uzak bir rüyadır. Öte yandan, görüntü özelliği tam desteğe sahip ve dezavantajları olmayan bir şamandıra neredeyse tüm düzen işlevselliği sağlayabilir.
Görüntüleme özelliği, yüzdürme ve konumla birlikte , bir öğe için oluşturulan kutu veya kutu türünü belirler. Çok basit bir özette, blok seviyesi elemanları, sonraki tüm elemanları bir sonraki satıra zorlarken, konteynır seviyesinin bütün genişliğine yayılırken, inline seviye elemanlar sadece içeriğinin genişliğini kapsar ve herhangi bir inline seviye elemanın aynı anda yanına akmasına izin verir. hat.
Ekranı uygulama : bir öğeye satır içi blok , satır içi düzeydeki bir blok kabı oluşturur. Bir etiketin içindeki metni düşünün. Etiketin kendisi blok düzeyinde bir kap iken, hepsi birbirleriyle 'inline' olurlar. Bu davranışı anlayarak, içeriğimizi birbirimizin yanına yerleştirmek için görüntüleme özelliğini kullanabiliriz. Öğelerimizin tamamı normal akışta kaldığından, daraltılmış bir üst öğe ile ilgili sorunlarımız yoktur. Benim düşünceme göre bu, istenen sonuca ulaşan daha temiz bir çözüm.
Kalemi görmek Yüzer bloklar CodePen'de davidicus tarafından.
Bu yöntem, normalde float'ı uygulayacağınız her yerde çalışır. Klasik ana / kenar çubuğu düzenine bir göz atalım. HTML için, içinde iki alt öğe olan bir sarmalayıcı elemanımız var:
Bizim CSS:
.wrapper,.mainContent,.sideBar {//change the box model for simplicity-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.wrapper {font-size: 1em;padding: 1.5em;width: 100%;}.mainContent,.sideBar {display: inline-block;vertical-align: top;width: 100%;}@media (min-width: 700px) {.mainContent {margin-right: 5%;width: 60%;}.sideBar { width: 35%; }}Aynı şekilde ana içeriğe ve ortaya konan kenar çubuğuna sahibiz.
“Float” yönü, wrapper div'in metin hizalaması ile belirlenir. Varsayılan hizalama kaldığından, hiçbir şey yapmak zorunda değildik. Bununla birlikte, şamandıralarla bile mümkün olmayan bazı düzenleri elde etmek için kolayca ortalayabilir veya sağa ayarlayabilirsiniz (daha sonra bunun üzerine). .Wrapper kabının iki çocuk div'u arasına yerleştirilen "boşluk yok" yorumuna dikkat edin. Bu, not etmek önemlidir ve bunu yapmak için neden, bu yöntem hakkında bir "con" dir .
Etiket örneğine dönelim. Html'de metin yazarken, tüm beyaz boşluk, HTML belgenizdeki boşluk miktarına bakılmaksızın tek bir beyaz boşluk karakterine sarılır. Dolayısıyla, biçimlendirmedeki "süzülmüş" öğeleriniz arasındaki boşluklar, tıpkı paragraf metnimiz gibi, tarayıcıda aralarında bir boşluk olarak kaydedilecektir. Bu, doğal olarak boyut hesaplamalarınızın, son öğeyi sayfanın bir sonraki seviyesine düşürmesini engeller. Bueno yok! Neyse ki bizim için bu küçük sorunu çözmek için birkaç çözüm var. Gibi:
HTML'nizdeki öğeleriniz arasındaki boşluğu kaldırın, böylece alanı denklemden kaldırın. Bunu bir süreliğine yaptım ama sadece özensiz görünüyordu ve okumayı zorlaştırıyordu.
Öğeleriniz arasında bir HTML yorumu eklemek, boşluk karakterini de örneğimizde olduğu gibi kaldıracaktır. Bu benim tercih ettiğim çözüm . Çoğu metin editöründe vurgulanan metin, not ile öğeler arasındaki kontrastın, işaretinizin okunabilirliğini önemli ölçüde iyileştirecek kadar yeterli olmasıdır. Bu ayrıca gerçek öğenin kendisinin doğru girintiliğini korumanıza da izin verecektir.
“Bu iyi ve her şey iyi ama benim için iyi olan bir yöntemi neden değiştireyim ki?” Diye düşünebilirsiniz. Eh, bir şamandıra ustası olsanız bile, yapamayacağı bazı şeyler vardır. Örneğin:
Zor olan "ortalanmış şamandıra", istenirse, elde edilecek ek işaretleme ve çoklu CSS özelliklerini gerektirir. Görüntüleme yöntemi ile, bu sadece metin hizalaması uygulayarak yapılır : sargıya merkez .
Görüntü yöntemini seçmenin en büyük avantajı, içeriğinizi dikey olarak hizalama yeteneğidir. Bir öğeyi kardeşine ne kadar sıklıkla odaklamak istediniz? Negatif marj / translate trick ile konumlandırma kullanabilirsiniz, ancak yine de, duyarlı, dinamik bir ortam ile bu tercih edilmez. Yerine dikey hizalama uygulamak : orta; parçalarınız üzerinde ekstra çalışma olmadan her zaman elemanlarınızı mükemmel bir şekilde merkezler. (Kaleme bakın Yüzer bloklar tarafından davidicus CodePen.)
Gerçekte, web tasarımı söz konusu olduğunda “herkese uyan tek bir beden” yoktur ve gerçekten kişisel tercihlere kaymaktadır. Hala belirli durumlarda float kullanıyorum ve bazen iş için gerçekten en iyi araç. Ancak, görüntü yöntemini kullanmanın kesin bir avantajı olduğunu hissediyorum. Tecrübelerimden, paftalarla uğraşmak için en iyi, en az hata eğilimli yöntem olduğunu buldum. Bu yöntemi daha çok araştırmak isteyenler için “Şamandıralara Hayır Deyin” kılavuzunu oluşturdum: SASS ile Inline-blok Izgara CodePen'de.
Öne çıkan görsel / küçük resim, daraltılmış duvar Chris Cotterman ile