Perfection or Vanity

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Pomyłki składniowe i wskazówki

06 października 2005

Oglądając strony w Internecie, zwłaszcza blogi, napotykam niepoprawne używanie wielu elementów. Zwykle tak się dzieje, gdyż znowu wszyscy zapominają o przeznaczeniu elementu, zwracając uwagę tylko na jego wygląd / standardowe zachowanie.

Na pierwszy ogień pójdzie etykietka tekstowa. Ludzie chcący wyjaśnić głębsze znaczenie danego ciągu tekstu nagminnie używają <acronym title=""/> bądź <abbr title=""/> do wszystkiego. Jakby nie wystarczyło użyć nawiasu za tym ciągiem, ewentualnie przypisu dolnego. No ale jeśli już chcecie mieć jazzy tooltip, to chociaż semantyki trochę - <span title=""></span> i odpowiedni wygląd (podkreślenie kropkowane na przykład) w CSS (span[title] {…} najlepiej). Znudziło mnie już podglądanie, czy wykropkowany zawiły / śmieszny / okropny wyraz jest w kolejnym <acronym/>. Skróty i akronimy tylko. Proszę.

Kolejną pomyłką, jest background-image dla elementu <blockquote/>. Ja wiem, że teraz jest taka moda, że się wstawia wszędzie „ bądź ” jako obrazeczek, ale trochę pomyślunku w kopiowaniu. Obrazek w 80% przypadków jest za wysoki jak na jedną linijkę tekstu. Ustawcie min-height bądź używajcie cytatów liniowych - <q></q>. Nie ma nic brzydszego jak oglądanie uciętego obrazka. To się tyczy także innych bloków wyróżnionych przez background-image. Co do cytatu, możecie być zainteresowani podwójnym obrazkiem w tle dla „” z wykorzystaniem akapitu w cytacie blokowym i selektora +:

  1. blockquote {
  2. background: url(quote-end.png) no-repeat 100% 100%;
  3. }
  4. blockquote p {
  5. background: url(quote-start.png) no-repeat 0 0;
  6. padding: 0 1.5em 0 1.5em;
  7. margin: 0;
  8. }
  9. blockquote p + p {
  10. background-image: none;
  11. }

Ostatni zapis mówi, uogólniając, że dla każdego akapitu, który ma za sobą inny akapit, nie będzie wyświetlanego obrazka otwierającego cytat. To znaczy nie będzie w przeglądarkach, które rozumieją selektor + - określający element p bezpośrednio następujący po innym p (nie zawiera się, tylko sąsiaduje).

Irytuje mnie także <strong/> i <em/> dla zwyczajnych efektów tekstowych - pogrubienia i pochylenia. Nawet konwerter Markdown dał się złapać na bardziej semantyczne znaczniki, LOL. Dzieci, pamiętajcie: <strong/> i <em/> wykorzystujemy przy nacisku na słowo, frazę. Jeśli wklejacie log z rozmowy, to na miłość boską, nie pogrubiajcie nicków rozmówców za pomocą silnej emfazy (<strong/>). Używajcie CSS dla <dt/> albo <b/> - to nie gryzie.

Niewystarczające marginesy dla elementów. Nic nie irytuje bardziej jak zlepienie się paru elementów strony, bo zabrakło między nimi optycznego odstępu. Można sobie zapisać, że marginesy pionowe zlepiają się ze sobą. Jak mamy margin-top: 2em dla <p/> i margin-bottom: 2em dla <ul/> to rzeczywista wartość odstępu między listą nieuporządkowaną, a akapitem będzie wynosiła 2em, nie 4em. Więc nie bójcie się tworzyć więcej odstępów, przerw - to tylko działa na plus Waszej strony.

Więcej grzechów nie pamiętam, liczę że będziecie za nie żałować.

Tagi wpisu:

Informacje i hiperłącza

To ja! Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

RSS

Informacje o wpisie

Napisał riddle 06 października 2005 o 12:46

Kategorie: Standardy sieciowe

Dodaj do:

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Dodaj bloga do Technorati Favorites Dodaj bloga do Del.icio.us Blog należy do sieci 10przykazań.com

Komentarze

  1. nbw 1 06 października 2005, 12:50

    "Używajcie CSS albo <b/> - to nie gryzie."

    Nie, Tato ;), używajcie <b>. Bawi mnie <span class="bold" /> albo jeszcze lepiej <span style="font-weight: bold;" />

  2. Riddle 2 06 października 2005, 12:51

    Używajcie CSS w znaczeniu: <dt>Nick rozmówcy</dt>, synku. ;)

  3. nbw 3 06 października 2005, 12:53

    To dopisz to, bo (nie)dam sobie ręki uciąć, że ktoś zielony właśnie będzie robił tak, jak napisałem :)

    Poza tym - pokłon.

  4. zgoda (jarek) 4 06 października 2005, 13:05

    Twoje prawo się wkurzać na akronimy i skróty, moje -- używać do woli, jeżeli mam taką potrzebę. To, że akurat jest wykropkowane, to ukłon dla niektórych, bo acronym i abbr to znaczniki czysto semantyczne. Właściwie to ludziom nic do nich.

  5. Riddle 5 06 października 2005, 13:06

    No ale nie semantyczne jest używanie rozwinięcia akronimu bądź skrótu dla wyjaśnienia czegoś zgoła innego. Przykład:

    Dzisiaj byliśmy na <acronym title="u babci">zajefajnym obiadku</acronym>, smakował wyśmienicie.

  6. Woo 6 06 października 2005, 13:07

    ale nie napisałeś do czego są przeznaczone abbr i acronym... a chyba właśnie do tego żeby wyjaśniać znaczenie słów?

    zresztą sam użyłeś <acronym title="Laughing out loud">LOL</acronym>...

    może sie nie znam ale to trochę niespójne...

  7. Jam Łasica RF 7 06 października 2005, 13:13

    Przyszłość to szablony joggera oparte na XUL-u ;-)
    http://www.kdt.internet.v.pl/jamlasica/proof-of-concept/xul/jogger.xul

  8. Riddle 8 06 października 2005, 13:15

    Pisałem już kiedyś, że acronym i abbr używam w konwencji akronim, skrót. LOL jest akronimem, mgr. skrótem.

    I to jest wyjaśnienie akronimu, skrótu, a nie zabawy etykietką tekstową. Nie wyjaśnienia słów. Proszę o zrozumienie problemu a nie szukanie dziury w całym.

    Jam Łasica: Wow :)

  9. nbw 9 06 października 2005, 13:16

    XUL jest ok, ale mnie nie przekonuje.

  10. zgoda (jarek) 10 06 października 2005, 13:19

    To następnym razem podkręć jasność wypowiedzi.

  11. Puck 11 06 października 2005, 17:46

    "Biała przestrzeń" brzmi prawie tak dobrze jak "ciemna materia", jednak mając na względzie miejsce, w którym tekstu publikujesz, raczej korzystaj ze słownictwa lepiej strawnego.
    Dziękuję.

  12. Domel 12 06 października 2005, 22:09

    > "Bawi mnie <span class="bold" />
    A mnie to nie bawi. A raczej podziwiam rozumienie semantyczności kodu i myślenia przyszłościowego.

    > albo jeszcze lepiej <span style="font-weight: bold;" />"
    A to faktycznie bawi.

    Żeby jeszcze temat pokrewny rozwinac ;-) zgadzam się z Riddlem co do znacznika dt (oczywiście nie zgadzam się z drugą częścią zdania co wynika z mojej powyższej wypowiedzi).

  13. Puck 13 06 października 2005, 22:17

    @Domel, nazwy klas/ID nie powinny mieć *nic* wspólnego z formatowaniem, którego chcemy w nich użyć.

  14. Domel 14 06 października 2005, 22:24

    @Puck: LOL. Błagam, pisz tylko wtedy kiedy wiesz coś na pewno, podawaj przykłady i dowody.

  15. Puck 15 06 października 2005, 22:32

    http://www.w3.org/QA/Tips/goodclassnames
    Czekam na przeprosiny.

  16. Riddle 16 06 października 2005, 22:35

    Puck, no hard feelings, ale tutaj chodzi o coś innego. <b/> przestanie być wspierane. <span class="bold"/> określa nie tyle fakt, że tekst będzie tylko pogrubiony, zastępuje znacznik <b/> który jest prezentacyjny. To nie jest <span class="blackboldtext"/>

    Zupełnie nie o to chodzi, powtarzam. Domel zareagował trochę spontanicznie, ale faktycznie, zgadzam się z nim.

  17. Puck 17 06 października 2005, 22:39

    Bold jest nadal elementem prezentacji. daj class="b", class="deprecated-element-b", ale, jeśli już się czepiamy, to na pewno nie bold, ktory jest wartością pewnej właściwości, tak samo jak 'red' czy, idąc dalej, '4pxborder'.

  18. Domel 18 06 października 2005, 22:45

    > http://www.w3.org/QA/Tips/goodclassnames
    Pozwol, że jednak bede wzorował się na
    http://www.w3.org/TR/CSS2/selector.html#class-html

    > Czekam na przeprosiny.
    No to czekaj dalej :-D

    Rownież zgaduje tak jak Riddle, że nie zrozumiałeś o co mi (nam) chodziło. Poprostu z punktu widzenia technicznego znacznik <u /> jest taki sam jak znacznik <b />. Czyli jeśli bede chciał sformatować tekst tak, żeby jakaś lego część była podkreślona użyje klasy (w znaczniku span), definijacej podkreślenie w CSS. To samo zrobie jak bede chciał pogrubić tekst. To jest zupełnie oczywiste, dlatego byłem współwnioskowałem o usunięcie znacznika <b /> z XHTML 2.0.

  19. Domel 19 06 października 2005, 22:49

    > Bold jest nadal elementem prezentacji.
    Oczywiście to nie prawda. Co wynika bezpośrednio z DTD i metadefinicji klasy.

  20. Riddle 20 06 października 2005, 22:51

    Idąc dalej, bold to angielskie słowo. Jeśli w <p/> bądź fragmencie <li/> trzeba coś pogrubić, na przykład:

    <p><b>1.1b</b>………</p>

    to dla mnie to jest lepsze niż <strong/>owanie. Oczywiście hiperpoprawność i przewidywanie, jak to napisał Domel wymagałoby używania klasy dla spana. No albo

    <p>1.1b<br/>………</p> oraz p:first-line { font-weight: bold; }

    Wariacje na temat…

  21. nbw 21 06 października 2005, 22:53

    Wymiękam.

  22. Domel 22 06 października 2005, 23:03

    Riddle: :-D Czegoś tak bardzo pomysłowego jak drugi przykład dawno nie widziałem ;-) . Wariacja to za małe słowo.
    [nbw, wymięk z tego powodu(?)]

  23. D4 23 06 października 2005, 23:05

    ej riddle, ale nawet w konnekcie (TemaciK beta) jest <strong> zamiast <b> przy przycisku pogrubiania.
    co nie znaczy, że takowego przycisku używam :P

  24. Riddle 24 06 października 2005, 23:06

    Na moje (m.in.) wyraźne życzenie jest.

  25. Riddle 25 06 października 2005, 23:06

    Po prostu częściej wysyłając wpis na Joggera używamy emfazy niż pogrubiania.

  26. zimaq 26 07 października 2005, 11:35

    Tak mi mieszacie w głowie, że niedługo nie będę wogóle pogrubień i kursyw używał... ;p

  27. D4 27 07 października 2005, 15:37

    a co to za różnica w końcu, czy strong czy b.
    pogrubia chyba tak samo, no nie?

  28. nbw 28 07 października 2005, 15:39

    Z punktu widzenia szarego użytkownika: pytanie bardzo dobre;

    Z punktu widzenia nas, deweloperów, pytanie na poziomie:

    <m4tt> wiesz.. 67% dziewczyn nie uzywa mozgu
    <funky_girl> ja naleze do tych 13 %

  29. D4 29 07 października 2005, 15:47

    no dobrze, więc niech ktoś mi przejrzyście i po polsku napisze "jaka jest *** różnica między *** <b> a *** <strong>, skoro na pierwszy rzut oka i tak nic *** nie widać"

  30. nbw 30 07 października 2005, 15:57

    To zależy kto patrzy (przypomniało mi się "well, it depends..." z ok/cancel ;)

    Najprościej by było powiedzieć: taka, jak między pogrubieniem a emfazą.

    Dla przykładu, podając dane kontaktowe w formularzu, możesz chcieć wyróżnić słowo "e-mail", poprzez pogrubienie. Pogrubienie to ma znaczenie li tylko prezentacyjne. Jeśli jednak chcesz zwrócić uwagę czytelnika na jakieś zdanie bądź jego fragment, to wyróżnisz je poprzez położenie nacisku (emfazy).

    Do wyglądu się nie przykładaj, bo wygląd można zmienić (strong nie musi być pogrubiony) i nie jest tu żadną zasadą.

    <b> jest prezentacyjne
    <strong> jest semantyczne

    Lepszym porównaniem, lepiej różnicę, jest chociażby

    <span style="font-size: 24px; font-weight: bold;">tekst</span> a <h2>tekst</h2>

    Capisci?

  31. zimaq 31 08 października 2005, 12:58

    Tyle, że h2 jest elementem blokowym, a span liniowym więc powinno być:

    <span style="font-size: 24px; font-weight: bold;">tekst</span> a <h2 style="dispaly: inline;">tekst</h2>

    lub

    <span style="font-size: 24px; font-weight: bold; display: block;">tekst</span> a <h2>tekst</h2>

    ( dobra, wiem, czepiam się ;)

  32. nbw 32 08 października 2005, 12:58

    Ale wygląda tak samo.

  33. D4 33 08 października 2005, 13:43

    to może zacytuję pewien dowcip
    " Czym się różni więgiel kamienny, od kamienia węgielnego?
    Tym samym czym picie w szczawnicy od szczania w piwnicy"

    Mimo wszystkich zawiłych wytłumaczeń, nadal nie widzę kompletnie żadnej różnicy, a jeśli nie widać różnicy - to po co przepłacać?

    Przy okazji - wydawało mi się, że h2 jest deprecated ...

  34. Jam Łasica RF 34 08 października 2005, 13:53

    D4: Gdyby Andrzej Lepper robił semantyczną stronę, to napisałby tak:

    Balcerowicz <strong>musi</strong> odejść!

    Wtedy teoretycznie np. czytnik tekstu dla osób niewidomych mógłby odpowiednio zaakcentować słowo "musi" :) A tag "b" to tylko zmiana wizualna, tak samo jak pogrubianie w Łordzie. To moja teoria nt. strong i b ;)

  35. D4 35 08 października 2005, 13:55

    hmm, ciekawa teoria ^^
    <b> tylko pogrubia, a <strong> wzmacnia... hmm...
    muszę chyba sobie nowy mózg na allegro kupić :P

  36. Puck 36 08 października 2005, 13:55

    To już przesada. Może cały HTML jest deprecated? H1->H6 po prostu zamieni się w zagnieżdżane <H> i <section> (afair), ale to dopiero w XHTML2, jesli mnie pamięć nie myli.

    Jak dla mnie kawałek prezentacji w HTMLu jakim jest <B> wcale nie jest grzechem - a wyrzucanie go "na pałę" nic nie da. Po prostu łatwo się tego czepiać.

  37. D4 37 08 października 2005, 13:57

    a tak BTW - http://no-www.org/ :>
    WWW IS DEPRECATED !!!

  38. nbw 38 08 października 2005, 14:12

    Owszem, ale ten "news" ma już trochę na karku... ;)

  39. Patrys 39 12 października 2005, 02:02

    D4:

    Odpowiedź po czasie, ale może lepiej zadziała na ciebie przykład. Wyobraź sobie, że jesteś niewidomy i właśnie kazałeś komputerowi odczytać najnowszy wpis na stronie współlokatora. Rozpatrzmy dwa przypadki - kolega mógł napisać:

    Na jutro zaprosiłem do nas dwie ekstra <b>laski</b>.

    albo:

    Na jutro zaprosiłem do nas dwie ekstra <strong>laski</strong>.

    Teraz zastanów się, czy wolałbyś, żeby twój program do czytania tekstu (jesteś niewidomy) poinformował cię, że:

    Jutro przyjdą do ciebie dwie ekstra grube laski.

    czy może:

    Jutro przyjdą do ciebie dwie ekstra LASKI.

  40. qwiat 40 12 października 2005, 02:29

    Ja jestem laikiem ale na mój mały rozumek widzi to tak:
    to <b>ważna rzecz</b>
    to <strong>ważna rzecz</strong>

    Dziś mam kaprys taki, że podkreślony tekst jest napisany czionką pogrubioną, a jutro mam ochotę na zielonego italica. Powiedz Riddle sam czy nie piał byś na widok czegoś takiego:

    b
    {
    font-weight: normal;
    font-style: italic;
    color: #0f0;
    }

  41. D4rky 41 12 października 2005, 15:22

    Patrys >> genialne po prostu porównanie. walnąłem ze śmiechu głową o klawiaturę...

  42. Tyhagara 42 17 listopada 2005, 20:29

    Po czasie ale jak czytam te wasze wywody ...musze odpisać.
    Znacznik <b> powoduje, że tekst będzie pogrubiony. Jeśli program nie potrafi pogrubić tekstu, to znaczy, nie potrafi wyświetlić pogrubionej czcionki, to zignoruje ten fakt i tekst nie będzie się w żadne sposób wyróżniał.
    Z kolei <strong> powoduje wyróżnienie tekstu. Tak się przyjęło, że <strong> przyjmuje postac pogrubienia, ale to nie jest reguła. Ponieważ jeśli program nie będzie potrafił pokazać pogrubienia, to wyróżni tekst w inny sposób To może być wyróżnik kolorem, czy jak ktoś już pisał, przeczytany przez program czytający głośniej, lub z innym akcentem.

    Istnieje cała grupa znaczników które są semantyczne i takich które nie są. Na przykład zamiast znacznika <i> powinniśmy używać znacznika <em> z tego samego powodu co w przypadki <b> i <strong>. Program który nie jest w stanie pokazać pochyłego tekstu zignoruje znacznik <i>, znacznika <em> nie zignoruje.

  43. {o} 43 16 stycznia 2006, 02:34

    Tyhagara - fajny wywód, tylko chyba zupełnie nie przystający do rzeczywistości. Możesz podać przykład tegoż probramu, który ignoruje b, bo nie umie pogrubiać?

    A jak chcemy coś mocniej wyróżnić?
    <strong><strong>blah</strong</strong>
    czy
    <b><b>cone</b></b>

  44. Tyhagara 44 28 stycznia 2006, 22:03

    {o} napisał: " Możesz podać przykład tegoż probramu, który ignoruje b, bo nie umie pogrubiać? "

    Wszystkie urządzenia z grupy - aural, braille, embossed, tty i część handheld. Czyli urządzenia słuchowe, przeglądarki głosowe, brailowskie, ternminale o jednakowej szerokości znaku, dalekopisy, niektóre urządzenia przenośne typu telefon komórkowy, palmtop. Oraz każdy inny program użytkownika który nie pokazuje pogrubionej czcionki z jakiś przyczyn.

    "The proper HTML elements should be used to mark up emphasis: EM and STRONG. The B and I elements should not be used; they are used to create a visual presentation effect. The EM and STRONG elements were designed to indicate structural emphasis that may be rendered in a variety of ways (font style changes, speech inflection changes, etc.)"
    http://www.w3.org/TR/WCAG10-HTML-TECHS/#text-emphasis

  45. jARRodx 45 23 sierpnia 2007, 20:33

    Riddle, „mgr.” jest błędem ortograficznym.

Dodaj komentarz

Do formatowania komentarzy używaj Textile (HTML nie działa). Szczególnie jeśli wklejasz większe fragmenty kodu. W razie niepewności użyj podglądu komentarza.

Wypowiedzi obraźliwe, infantylne oraz nie na temat będą moderowane – pisząc postaraj się zwiększyć wartość dyskusji.

Komentarze nie służą do wysyłania wiadomości albo informowania o błędach, itd. Chcesz coś mi napisać – skontaktuj się.