Yıllar önce, HTML tabloları web sayfalarını düzenlemek için standartdı. CSS ve semantik düşünme bunu değiştirdi ve bugün CSS çerçeveleri tasarımı nispeten kolaylaştırdı.

Ama aynı zamanda şaşırtıcı sayıda gereksiz elemanlar da üretebilirler.

960 Izgara Sistemi eklerini teşvik ediyor

elemanlar ve class özellikle karmaşık sayfalardaki özellikler. Bu gerçekten iç içe geçmiş tablolar üzerinde bir gelişme mi?

Temiz kod oluşturmak, çerçevenin ötesine geçmek ve gerçekten neyi temsil ettiğini düşünmek anlamına gelir.

CSS çerçeveleri, bir iş akışı çözümü sağlar, yani ızgara tabanlı web düzenlerinin hızlı bir şekilde dağıtımı. Bugün en popüler çerçevelerden biri olan 960 Izgara Sistemi ( 960.gs ), varsayılan genişliğinden sonra adlandırılır. Uygulama ile, 960.gs herhangi bir web tasarımcısı için harika bir araç olabilir. Ama aynı zamanda birkaç eski problemi tekrar gözden geçiriyor.

CSS, yaygın kullanımdan önce, bir web tasarımcısının ihtiyaç duyduğu tüm düzeni sağladı. Daha karmaşık tasarımlar, tabloların içine yerleştirilmiş masalara sahipti, ancak bunların aşırılıkta kullanılması, karışık bir HTML karmaşası yarattı. CSS tabanlı düzenler, tasarımcıları daha az HTML vaadiyle donattı; ayrıca semantik meraklılarına da hitap ettiler. Basitçe söylemek gerekirse, CSS, içeriğin neye benzemesi gerektiği ile ilgili olmayan içeriği açıklayan HTML kullanımını teşvik etti.

Tasarımcılar CSS'yi kullanmayı öğrendikçe, div öğeleri tabloları değiştirdi. Ancak div'ler, masalarda olduğu gibi - ve çoğu zaman - iç içe olabilir.

Class-itis ve Div-itis'in Yayılması

Açık, yalın kod birçok avantaj sunar. Düzeltmek kolay, farklı tarayıcı türlerinde daha az sayıda soruna neden oluyor ve daha az sorun çıkıyor. İlgili etiketler ekran okuyucuların, arama motorlarının ve mobil cihazların yerleşime ek olarak anlamı yorumlamasına yardımcı olur.

Anlambilimden başka, kullanımının büyük avantajı

üzerinde
Aynı işi yapmak için daha az kodla sonuçlanıyoruz. Ama şimdi tasarımcılar sınıfların ve divların bir araya gelmesiyle karşı karşıya.

960.gs gibi CSS çerçeveleri, altta yatan sorunu tablolarla yeniden oluşturur mu? Hedefleri verimli bir HTML ise, tasarımcılar ve geliştiriciler 960.gs'yi “class-itis” (yani sınıfların aşırı kullanımı) ve “div-itis” (yani tabloların yeniden iyi görünmeye başlamasına neden olan çok fazla div) yaymadan kullanabilirler mi? Evet yapabilirler.

Nasıl olduğunu anlamak için çerçevenin kendisine bakmalıyız.

960.gs bir yıkık

960.gs, CSS'de yazılmış, web sayfalarının oluşturulmasını kolaylaştıran bir dizi sütun sağlar. Dosyaları indirin, bunları web sitenize ekleyin ve kullanıma hazır. Özel bir eklenti veya yeni teknoloji gerekmez ve bunu diğer CSS dosyalarıyla birlikte kullanabilirsiniz.

Sütunlar (doğal olarak) “konteynerler” denilen bloklar içinde bulunur. container_12 ve container_16 sırasıyla 12 ve 16 sütunlara bölünür. Özel boyutlar mevcuttur.

960-piksel çapında kapların diyagramı

Yukarıdaki şemada 12 ve 16 sütunlu iki varsayılan kap gösterilmektedir. Gri, son web sitenizde görülmeyecek elbette. Sütunlar sadece “ızgaralar” olarak adlandırılan blokların düzenlenebileceğini gösterir.

Bir ızgara, bir kapsayıcıda birden çok sütunu geçebilen bir içerik bloğudur. Izgaralar tutulduğu için sola dönüyor .container_x modüler düzenler için idealdir. Her bloğun genişliği, hangi kılavuza uygulandığınız tarafından belirlenir: grid_1 bir sütun genişliğindedir grid_5 beş sütun genişliğinde, vb.

bir kap içinde çeşitli ızgaraların diyagramı

yukarıda, .container_12 üç ızgara tutar. Her ızgara, sayfa içeriğinin farklı öğelerini barındırır.

bir kap içinde çeşitli ızgaraların diyagramı

yukarıda, .container_16 sırasıyla 12 ve 4 sütun iki blok tutar. Sevmek .container_12 Bu 16 sütun genişliğindeki mizanpajı 960 piksel genişliğinde ölçer, ancak sütunları daha dardır.

İçeriğin öğelerinin sığdığı ızgaraların yeniden boyutlandırılması basittir: grid_x her divanda.

Resmi 960.gs sitesi çerçeve üzerine inşa edilmiş web sitelerini vitrine çıkarır ve aynı zamanda sayfa şablonlarını, özel bir ızgara üreticisine bağlantılar ve çerçevenin kendisini sunar. Ayrıntılı talimatlar da dahil edilmiştir, çünkü öğrenecek daha çok şey vardır. Izgara kenar boşlukları ve ızgaralar arasındaki oluklara girme özelliği sistemi daha da esnek hale getirir.

Bu faydalara rağmen, gömmek

içinde
kodlayıcıları birçok sınıf özniteliğini (sınıf-iti) ve div'leri (div-itis) kullanmaya teşvik eder.

Çözümler

Düzen için tablolara karşı koymak yeterince kolaydır. Ancak, üç veya daha fazla yuvalanmış div düzeyi kullanmak sorunu çözmez — sadece bir etiket kümesini bir başkasıyla değiştirir. Çerçeveler yardım ediyor ama her zaman ikilemi çözmüyor. Biraz önceden tahmin edersek, bu problemlerin birçoğu önlenebilir.

Sadece Aslında İhtiyacınız Olan Sınıfları Kullanın

Aşırı CSS koduna en basit çözüm, gerekli olmayan şeyleri kesmektir. 960.gs, web sitesi yayına girdiğinde değiştirilmesi gereken bir wireframing aracı olarak tasarlandı. 180'den fazla sınıf tanımını içerir.

Tasarımınız yapılandırılmışsa, .container_12 ve asla fazla kullanmaz .grid_5 ve .grid_7 sonra diğerlerini CSS'den kaldırın.

Uygun Unsurlara sınıf = ”grid_x” uygulayın: Başlıklar, Görüntüler, Bağlantılar, Paragraflar

.container_x and ve .grid_x sınıflar div öğeleriyle sınırlı değildir. class attribute sınıf özniteliği dışında herhangi bir öğeye uygulanabilir html , head , meta , param , script , title ve style -Sadece pratikte herhangi bir şey body . Bir çift div etiketi yalnızca bir öğe içeriyorsa, gereksiz olabilir.

Kılavuz Kodunun Div olmayanlara Uygulanması

Div'leri kullanma Anlamsal kod kullanma




photo

photo




















#"> .........

#" class=grid_3> …


#" class="grid_3">…



#" class="grid_3">…



#" class="grid_3">…



#" class="grid_3">…




Bazı Unsurlara Izgara Özellikleri Verme

Basit CSS olmak, .grid_x başka bir sınıf adıyla veya herhangi bir öğe ile çalışacak özelliklere sahiptir. Özellikleri belirli öğelere kopyalayarak ekstra sınıflar gereksiz hale gelir.

.examples li { (properties of .grid_4) }


Aşağıda, ızgarayı liste öğelerine uygulamak, HTML'de en az değişiklikle bile sütunlar oluşturur.

sütunlara dönüştürülmüş üç liste öğesi

CSS yukarıdaki listeyi çok sütunlu bir gruba dönüştürür. Mermi noktaları olan normal bir listeye ihtiyacınız varsa, class="examples" bağlıyor. Bu semantik mi? Kesinlikle - içerik bir listeye uygun olduğu sürece. CSS sadece her mermi noktasının nasıl sunulduğunu değiştirir.

Başka bir örnek:

.photos p { (properties of .grid_10) }.photos img { (properties of .grid_6) }
photo

First caption

photo

Another caption

Bu, fotoğraflara bitişik olarak paragraf etiketlerine eklenen altyazıları otomatik olarak koyar.

En az HTML içeren bir ızgarada fotoğraf ve altyazı

Tablolar uygun olmadığında, tablo olmayan HTML ile tablo efektinin oluşturulması kolaydır.

.datelist { (properties of .container_12) }.datelist h3 { (properties of .grid_3) }.datelist p { (properties of .grid_7) }.datelist strong { (properties of .grid_1) }

subhead

3 p.m.Jan 1, 2010

subhead

3 p.m.Jan 1, 2010


Tablo dışı etiketlerle işaretlenen hücresel veri

Yukarıdaki örnekte, tablodaki her "hücrenin", her şeyi yakalamadan ziyade benzersiz içeriğini yansıtacak şekilde farklı bir etiketi olduğu bir etkinlik programıdır. etiket. (İdeal? Belki de değil. HTML içerik grupları arasında ayrım yapmaz.)

uygulama .grid_x Diğer öğelerin özellikleri bazı planlama gerektirir, ancak daha az karmaşık HTML ile sonuçlanır ve 960.gs kendi kendine müdahale etmez.

Çocuk Öğelerini değil, Ana Öğelerdeki Sınıfları Kullan

Div-itis ve sınıf-itis CSS çerçeveleri ile sınırlı değildir.

Son bölümdeki tüm örnekler ilginç bir özelliği paylaşır: her birinde yalnızca bir sınıf beyanı. HTML'de bir satırda aynı sınıf özniteliği birkaç kez kullanıldığında, çocukları yerine ana öğeyi değiştirin.

Gereksiz:

.item { (various properties) }


Yukarıdaki altı elementin bir sınıfı vardır. Onlar gereksizdir çünkü sınıflar aynıdır. İşte daha iyi bir yol:

.group-of-items li { (various properties) }


Sınıf-itis için çare, ana öğeye tek bir sınıf atamaktır. CSS seçiciler işi yapar, stilleri her birine uygular

  • içinde .group-of-items sınıf. Bu yöntem, ortak bir ebeveyn ile herhangi bir öğe grubunda kullanılabilir. Örneğin:

    .title { (various properties) }.subhead { (various properties) }.publication-date { (various properties) }.body-text { (various properties) }


    Yukarıdaki paragrafların çoğu sadece basit paragraflardır ve henüz gereksiz sınıf özelliklerine sahiptir. Ayrıca, sadece kendi sınıfları tarafından ayrılan iki başlık var.

    öğeler iyi bir içerik yapısı için yapmazlar. İşte daha iyi bir çözüm:

    .article h1 { (various properties) }.article h2 { (various properties) }.article .publication-date { (various properties) }.article p { (various properties) }


    Şimdi sadece iki sınıf kalır. Biz tuttuk .publication-date Onu altından normal paragraflardan ayırmak için sınıf. HTML'de "tarih" etiketi bulunmadığından, paragrafın içeriklerini göstermek için bu sınıf gereklidir. Yeni .article class, bu div ve içindeki öğeleri minimal işaretleme ile CSS'de stillemenize olanak tanır. Her iki örnekte de CSS'nin her biri dört tanımlıdır, ancak yine de daha çok daha temiz kodla sonuçlanırız.

    Genel olarak, ortak bir ebeveyne sahip özdeş unsurlar ekstra özniteliklere ihtiyaç duymaz. Sınıflar sadece aralarında bir fark olduğunda yardımcı olur. Bir kural kuralı: Sınıfları yalnızca başka türdeki içerik türleri arasında ayrım yapmanız gerektiğinde kullanın.

    basitleştirmek

    960 Grid System ve genel olarak CSS çerçevelerinin amacı, web sayfalarını düzenlemek için gereken çabayı azaltmaktır. CSS'nin yararı, bir sayfayı görüntülemek için gerekli HTML miktarını azaltmasıdır. Ama bir düzen dili olarak, CSS mükemmel değil . Çerçeveler, yalnızca çözümlerin değil, insanların çözüm üretmelerine yardımcı olan araçlardır. Sınıf-itis ve div-itis ile mücadele etmek tasarımcılara ve geliştiricilere kalmış.


    Webdesigner Deposu için özel olarak yazılmış Ben Gremillion . Ben, iletişim sorunlarını daha iyi tasarımla çözen serbest bir web tasarımcısı.

    Daha azı ile daha fazlasını nasıl söylersin? Aşağıdaki yorumlarda kodu ve iş akışınızı nasıl düzenlediğinizi paylaşın…