Jedną właściwością CSS, która zmieniła moje postrzeganie CSS, była display. W moim odczuciu jest to właściwość, która sprawia, że zdajesz sobie sprawę, że CSS jest językiem do stylizacji nie tylko dokumentów HTML, ale arbitralnych dokumentów XML (i, w teorii, dowolnej hierarchicznej struktury danych). Kiedy to zrozumiesz, możesz zrobić o wiele więcej z tym językiem.

Mówiąc dokładniej: nie ma nic nieodłącznego o elemencie paragraph, który sprawia, że pojawia się na stronie jako block-tak się składa, że domyślny arkusz stylów większości (jeśli nie wszystkich) przeglądarek ustawia na nim właściwość display na block. Równie dobrze mogło to być inline lub coś zupełnie szalonego jak list-item. Kiedy zapomnisz o przekonaniu, że niektóre właściwości CSS są z natury wyjątkowe, gdy są stosowane do niektórych elementów HTML, otwierasz drzwi do zrozumienia CSS na innym poziomie. Jakkolwiek niepraktyczne by to nie było, wierzę, że ludzie poznaliby CSS dokładniej, gdyby przeglądarki nie miały domyślnego arkusza stylów (a dokładniej, jeśli wszystkie elementy były initalizowane z tymi samymi wartościami domyślnymi).

To prowadzi mnie do jednego konkretnego aspektu HTML / CSS, który został poruszony wcześniej w tym wątku: Czy tabele powinny być używane do oznaczania formularzy? Uważam, że to nie problem i uważam, że projektanci, którzy stanowczo temu odmawiają, nadal patrzą na znaczniki HTML zbyt prezentacyjnie, mimo że ich intencje są odwrotne. Pozwól mi. wyjaśnić:

Najpierw przyjrzyjmy się elementowi ul, używanemu do reprezentowania listy nieuporządkowanych elementów. Tradycyjnie tego rodzaju lista jest pokazywana jako pionowy stos przedmiotów, z punktorami przed każdym z nich. Jednak w ostatnich latach ul był używany do oznaczania rzeczy, takich jak menu nawigacyjne, z przedmiotami ustawionymi poziomo i bez pocisków w zasięgu wzroku. Dzieje się tak dlatego, że znaczenie ul jest brane semantycznie, a nie prezentacyjnie. Innymi słowy: nie ma znaczenia, jak lista elementów zostanie ostatecznie przedstawiona wizualnie; jeśli to, z czym mamy do czynienia, pasuje do koncepcji listy nieuporządkowanej, możemy i powinniśmy użyć dla niej elementu ul. Na tym polega semantyczny HTML.

Jaka struktura danych najbardziej pasuje do elementu table? Jeśli zapytasz mnie, jest dana odpowiedź: macierz dwuwymiarowa. Aby zilustrować mój punkt widzenia, spójrzmy na jeden możliwy sposób reprezentacji tablicy dwuwymiarowej w XML:

<parent-array>
    <child-array-keys>
        <key>Name</key>
        <key>Age</key>
        <key>Country</key>
    </child-array-keys>
    <child-arrays>
        <array>
            <value>Mike</value>
            <value>35</value>
            <value>England</value>
        </array>
        <array>
            <value>Jakob</value>
            <value>22</value>
            <value>Sweden</value>
        </array>
        <array>
            <value>Gerhardt</value>
            <value>29</value>
            <value>Germany</value>
        </array>
    </child-arrays>
</parent-array>

Czy ta struktura danych nie może być równie dobrze przedstawiona w ten znajomy sposób?:

<table>
    <thead>
        <th>Name</th>
        <th>Age</th>
        <th>Country</th>
    </thead>
    <tbody>
        <tr>
            <td>Mike</td>
            <td>35</td>
            <td>England</td>
        </tr>
        <tr>
            <td>Jakob</td>
            <td>22</td>
            <td>Sweden</td>
        </tr>
        <tr>
            <td>Gerhardt</td>
            <td>29</td>
            <td>Germany</td>
        </tr>
    </tbody>
</table>

Nazwy elementów są różne, ale struktura danych jest taka sama. Połącz to z faktem, że właściwość display pozwala nam reprezentować dowolną hierarchiczną strukturę danych na wiele różnych sposobów i mam nadzieję, że zgodzisz się ze mną, że tabela nie jest tabelą, ponieważ wygląda w określony sposób, ale dlatego, że reprezentuje określoną strukturę danych.

W zależności od złożoności Twojej formy, może ona lub nie spełniać kryteriów dwuwymiarowej tablicy. Nawet jeśli nie, należy zauważyć, że tabela może być równie dobrze używana do reprezentowania pojedynczej tablicy asocjacyjnej, z elementem th w każdym tr reprezentującym klucz, a elementem td reprezentującym wartość. W przypadku takiej formy, można powiedzieć, że równie dobrze można użyć listy definicji (dl) i to prawda. W tym konkretnym przypadku chciałbym jednak spojrzeć na korzyści i wady wdrożenia każdego rozwiązania: [29]}

• Po pierwsze, nie ma sposobu, aby jawnie połączyć dt i dd element (w przeciwieństwie do HTML 5 lub XHTML 2; zapomniałem, który). Użycie tabeli pozwala jednak na to, ponieważ element tr jawnie grupuje wartości jednej "tablicy" pod wspólnym element.
• Po drugie, nie ma sposobu, aby niezawodnie używać display: table i powiązanych właściwości CSS cross-browser na liście definicji, zmuszając cię do używania technik pływających, które są z natury bardziej ograniczone, jeśli chcesz, aby twój formularz był ułożony jako tradycyjna tabela. Tabele, oczywiście, mają tę funkcjonalność z natury w domyślnym arkuszu stylów każdej powszechnie używanej przeglądarki i mogą mieć zupełnie inne wartości display przypisane do nich, jeśli zajdzie taka potrzeba.

Miejmy nadzieję, Nie nadmuchałem twojego pytania niepotrzebnie refleksjami na temat wykorzystania tabel HTML w połączeniu z CSS; po prostu czułem, że konieczne jest, aby zwrócić uwagę na pojęcia stojące za CSS.

1. Resety CSS są niezwykle pomocne.

2. Po pewnym czasie poznajesz różne błędy (głównie w IE) i unikasz ich.

3. CSSEdit na Macu ma więcej wspólnego z moją znajomością CSS niż cokolwiek innego. To proste i niesamowite. Firebug ma podobne zdolności, ale nie tak niesamowite.

Większość moich rzeczy działa we wszystkich głównych przeglądarkach od samego początku, mimo że rozwijam się w webkit. Pochodzi tylko z robienia wielu i dużo, dużo, dużo CSS.

CSS musi być moją ulubioną częścią rozwoju. Nie uznałbym tego za "worek sztuczek". Jest to dobrze przemyślany język z możliwością zrobienia prawie każdego układu.

Jedyny raz, kiedy to wpływa na mój HTML jest wtedy, gdy muszę zrobić kilka efektów javascript (jak przesuwane szuflady, itp.) ... i zwykle oznacza to tylko owijanie rzeczy owijką.

CSS zen jest mniej CSS

• LESS jest rozszerzeniem CSS, które umożliwia ponowne użycie i hermetyzację wartości (na przykład wartości kolorów), poprawia dziedziczenie, pozwala również na lepsze zagnieżdżanie powiązanych właściwości i operacji.

Istnieje . Net Edition dla mniej CSS.

Zacznij ponownie używać klas i układać klasy na elementach, a także zapoznaj się z regułami specyfiki, dzięki czemu możesz zastąpić niektóre style w razie potrzeby, zobaczysz bardzo szybko, gdzie jest to rzeczywiście przydatne i więcej niż tylko "sztuczki".

1. To dlatego, że wiele "technik" to sztuczki lub hacki i

2. Cokolwiek rozumiesz przez CSS zen, osiągasz to, pracując na swój tyłek. 10000 godzin pracy, jeśli wierzyć Gladwellowi.

Hang around in the css Zen Garden?
www.csszengarden.com

Zrozumieć podstawowy model układu CSS.

Podstawową jednostką jest Pole . HTML na poziomie bloków-elementy takie jak BODY, P, H n itd. odpowiada ramce w układzie.

Pole jest prostokątne i domyślnie rozszerza się poziomo do dostępnej szerokości. Pionowo są ułożone w stos. Boxed może być zagnieżdżony, np. P-box będzie przynajmniej zagnieżdżony wewnątrz BODY-box.

Pudełka mogą mieć margines, obramowanie i wypełnienie, zgodnie z modelem pudełkowym : http://www.timofejew.ca/2006/css-box-model-hierarchy/

Więc masz pionowy stos (lub kolumnę) zagnieżdżonych pól. Jeśli chcesz, aby niektóre pola przesunęły się poza główną kolumną, np. jako pasek boczny, float (float: left|right) jest przesuwany na lewą lub prawą krawędź bloku zawierającego, a główny stos owija się wokół.

Jeśli chcesz, aby pudełka były ułożone poziomo (a nie pionowo), użyj display:inline-block.

Jeśli potrzebujesz siatki, gdzie krawędzie pola są wyrównane w dwóch wymiarach, używasz display:table. Ale ponieważ IE przed wersją 8 nie obsługuje tego, możesz wybrać "oszukać" i użyć tabel znaczników HTML do utworzenia siatki.

Jeśli chcesz umieścić pudełko całkowicie niezależne od przepływu pudełek, używasz absolutnego pozycjonowania, które umieści pudełko dokładnie tam, gdzie chcesz - prawdopodobnie nakładając inne treści.

Droga do oświecenia przychodzi, gdy zdajesz sobie sprawę, że CSS jest świetny dla elementów stylizacji, ale awful do definiowania układu. więc tylko z wyjątkiem tego, że w przypadku złożonych układów między przeglądarkami nigdy nie wymyślisz rozwiązania, które jest tak schludne i przyjemne, jak byś miał nadzieję. AHA, poza objawieniem, że IE6 został umieszczony na tej ziemi jako środek do testowania Twojej cierpliwości do punktu, też by pomogło!

Pamiętaj, że wszystko, co robisz, może zostać zastąpione, a Twoja strona musi być adaptowalna, aby zmienić.

Look good naked.

Treść jest królem. Strony internetowe nie różnią się od książek tym, że formatują tekst w sposób przyjemny wizualnie dla czytelnika, ale jeśli usuniesz opakowanie, witryna musi nadal płynąć tak, jak powinien.

Najlepszym sposobem, aby wiedzieć, że masz to dobrze jest po usunięciu wszystkich CSS - w ten sposób można jeśli wszystko wygląda tak, jakby miało taką samą wagę, to zrobiono to źle.

Używając elementów HTML dla ich znaczenia semantycznego, robisz coś więcej niż zmniejszanie ilości div, których używasz, tworzysz znaczenie dla swojego dokumentu. Wyszukiwarki zwiększają wagę stron, które mają wyszukiwany termin w nagłówku, niż w treści treści. Czytniki ekranu kładą nacisk na nagłówki, nie dlatego, że pojawiają się większe, ale dlatego, że dałeś im pierwszeństwo w dokumencie.

<div class="heading">What I ate for breakfast</div>
<div class="paragraph">Cereal, orange juice, toast.</div>

Chociaż to Działa z perspektywy prezentacyjnej, ma znacznie mniej znaczenia niż to:

<h1>What I ate for breakfast</h1>
<p>Cereal, orange juice, toast.</p>

Nie wszyscy są tacy sami.

Projektowanie dla sieci z pewnością nie jest projektowaniem dla druku. Musisz sprawić, aby Twoja strona wyglądała dobrze dla Twoich czytelników, na dowolnej platformie, z której zdecydują się korzystać - Mac OS X, Windows, Linux,iPhone, mobile itp. Zanim pojawił się iPhone, przeglądarki mobilne zasysały. Większość nadal to robi, a w takich przypadkach po napisaniu poprawnych semantycznie znaczników będziesz mógł zmień odpowiednio wygląd strony-w końcu CSS zawiera wsparcie dla wielu różnych mediów, w tym między innymi ekranu komputera, projektora, telefonu komórkowego, druku, czytnika ekranu itp.

Nie każdy komputer też jest taki sam - kolory mogą być różne, zainstalowane czcionki mogą być różne, Hej, mogą używać IE6. Nigdy nie sprawiaj, aby użytkownik czuł, że przeglądarka, którą ma, jest niewystarczająca, dzięki wyskakującym komunikatom z napisem "twoja przeglądarka jest nieaktualna". Zamiast dostosować. Obejmują szeroki zakres rodziny czcionek, które obejmują najnowsze i najlepsze czcionki zmieszane z powszechnie używanymi niżej w drzewie. Stopniowo ulepszaj swoją witrynę, dzięki czemu możesz mieć świetny projekt w IE-i uczynić go jeszcze lepszym dla tych użytkowników Safari / Firefoksa z takimi rzeczami, jak CSS3 multicolumn lub wiele obrazów tła.

Kod rozsądnie.

Po Trzecie chcę tylko dotknąć najlepszych praktyk CSS. Błędem jest myślenie, że musisz nadać wszystkim ID i klasę w swoim HTML. Chyba że ty jeśli uruchomisz stronę, która potrzebuje tych identyfikatorów dla javascript, powinieneś zawsze zaczynać bez klas i dodawać je później.

Używaj selektorów potomnych, takich jak p em { }, selektorów potomnych p > em { } i selektorów sąsiednich p + em { } do kierowania określonych elementów. Łatwo jest przewidzieć wzorce w sposobie stylizacji dokumentów i nie należy tworzyć klas "tylko dlatego". Dobrym trickiem, którego używam, jest zasada element + * { } - stosuje style do wszystkiego, co pojawia się po pewnym elemencie i jest sprytny do czyszczenia elementów pływających.

Wolę skonsolidować wiele wspólnych zasad w jedną dużą regułę, na przykład gdybym chciał kilka różnych elementów red użyłbym czegoś takiego:

blockquote, a, h3 { color:red; }

Jest to o wiele lepsze niż nadanie każdemu z tych elementów klasy i oczywiście zawsze można później nadpisać style. To jest prawdziwe piękno css, że każda ogólna zasada może być anulowana za pomocą konkretnej.

To okazało się trochę dłużej niż planowałem. Podsumowując-napisz świetny HTML, który nie wymaga div (chyba, że musisz obejść stylizację), Zaplanuj swój projekt tak, aby był cross browser, mając na uwadze wszystkie różnice dla każdego użytkownika i minimalnie kod. Jest o wiele więcej selektorów, a poruszyłem tylko kilka tutaj - chodzi o to, aby kodować bez klas, chyba że naprawdę trzeba.

Nie jestem pewien, czy rozumiem, co masz na myśli, jednak większość mojego kodowania HTML jest w zasadzie podyktowana przez mój CSS. Jego prawdopodobnie nie jest to najlepszy sposób, aby to zrobić, ale staram się używać żadnych tabel w ogóle i div jak najwięcej i tak często, jak to możliwe. Od układu do wyglądu i stylu, a także wszędzie tam, gdzie mogę zastosować CSS.

Myślę, że CSS to świetne narzędzie i więcej niż tylko sztuczki. To zupełnie inny sposób patrzenia na rzeczy.

Im więcej używasz CSS, tym lepiej się dostaniesz -- to wszystko naprawdę jest w tym. Możesz czytać o technikach CSS każdego dnia, ale nie będziesz pamiętać niczego, dopóki jej nie użyjesz.

Opanowanie CSS nie polega na znajomości konkretnej sztuczki dla konkretnej sytuacji (po to jest internet), ale raczej na możliwości wymyślenia nowej sztuczki dla nowej sytuacji.

Jak wspominały inne posty-opanowanie CSS przychodzi z praktyką (kilka małych i średnich projektów powinno wystarczyć, aby dostać się do zaawansowanego poziomu i lepiej zrozumieć "frameworki" (cytowane, ponieważ nie badałem, czy istnieją jakieś frameworki HTML, ale to najlepsze słowo, jakie mogę wymyślić, aby opisać HTML/CSS separacji treści i stylów) używane przez obecnych programistów).

Niektóre dobre zasoby dla Ciebie do sprawdzenia są W3Schools CSS Tutorial / Reference i oczywiście zwykła stara wyszukiwarka Google, aby znaleźć wszystkie te hacki kompatybilności między przeglądarkami (lub związane z modelem pudełkowym).

Przeczytałem doskonałą prezentację o nazwie "obiektowo zorientowany CSS " i żałuję, że nie przeczytałem jej przed rozpoczęciem mojego najnowszego długoterminowego projektu.

2 Główne Zasady:

1. oddzielna struktura i skóra
2. oddzielny pojemnik i zawartość

W prezentacji szczegółowo opisano 10 najlepszych praktyk i 9 pułapek.

Połącz to, czego Cię uczy z obszernym wykorzystaniem wtyczki Google PageSpeed dla Firefoksa . Informatyka powie Ci, które selektory CSS mogą być bardziej wydajne i jak je uczynić bardziej wydajnymi.

Uważam, że CSS jest niezwykle przydatny do ponownego użycia i porządkowania mojego układu i kodu. Nie mogę sobie wyobrazić rozwoju witryny bez użycia przyzwoitej ilości CSS, a ponieważ jest to stosunkowo prosty język, łatwo jest wprowadzić szybkie zmiany w zestawie elementów bez konieczności przekopywania się przez tysiące linii kodu. Może jestem po prostu naiwny, ale kocham CSS.

Czuję się jakbym używał 'trików zamiast tequników' z Javascript. Chociaż jest to również koniecznością dla każdej dynamicznej witryny, to trochę mnie brudzi zhakowanie zestawu funkcji, które wysyłają żądania asynchroniczne (głównie), bo po prostu wygląda fajniej :).