Inne stylowanie dla triggerów JavaScript?

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.

YouTube zastosowało bardzo użyteczną konwencję wyglądu linków. Oprócz tego, że są koloru niebieskiego, te zwyczajne mają domyślne podkreślenie ciągłe, a JavaScriptowe podkreślenie kropkowane.

Zwykli użytkownicy jak chcą coś kliknąć, nie patrzą na pasek statusu i nie zawsze rozumieją o co chodzi z # na końcu adresu. Ten sposób oznaczania linków wydaje mi się superużyteczny, zwłaszcza w czasach boomu na usprawnienia w JavaScript i Ajax oraz konieczności oswojenia ludzi z brakiem przeładowania strony.

Pewnie będzie słychać głosy, że jak przełącznik nie jest prawdziwym linkiem to nie powinno się używać elementu a - bo w opinii większości link jest przejściem na inną stronę (ewolucja poglądów to ciężka sprawa). Wasze opinie?

Tagi wpisu: javascript, links, style, usability, youtube

Informacje i hiperłącza

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 01 września 2006 o 10:53

Kategorie: JavaScript & DOM, Użyteczność

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Komentarze

Aule 1 01 września 2006, 10:55

Ciekawe, nie zauważyłem tego wcześniej ;)
Ktos 2 01 września 2006, 10:59

Fajne. Dobra myśl z tymi innymi podkreśleniami. A czy nie powinno się używać elementu <a>. Nie wiem. Czy zamiast niego miały by to być powiedzmy <span> stylowane na <a>? Wydaje się to trochę głupie.

PS. Mnie niesamowicie denerwuje gdy w Gazeta.pl chcę obejrzeć powiększenie zdjęcia i z przyzwyczajenia klikam środkowym klawiszem myszy i dostaję pustą stronę, a w pasku adresu: javascript:foo(); Tutaj to by akurat mogli zrobić coś z tym - temat trochę podobny ;-)
Uzytkownik 3 01 września 2006, 11:15

JavaScript ma jedną wade - nie da się stosować przez zakładki...
Jak to jest span to nie ma chyba takiego problemu...
shw 4 01 września 2006, 11:31

co do srodkowego przycisku - inna sprawa, ze [jezeli sie da przez uzycie zarowno href jak i onclick - pewien nie jestem] powinno sie tworzyc linki przenoszace na strone z pominieciem javascriptu, kiedy sie na nie kliknie srodkowym [lub konkretniej - nowa zakladka/okno], a druga sprawa, ze przegladarki takie superanckie, 10 000 rozszerzen, bittorrenty, a nikt nie pomyslal, zeby zalatwic ten problem takze od strony przegladarki.
nediam 5 01 września 2006, 11:53

shw: w firefoxie jest specjalne rozszerzenie do tego :)
Dulek 6 01 września 2006, 12:09

Jak się nazywa?
oom 7 01 września 2006, 12:20

przez moja rozdzielczosc i przez moj wzrok, dopiero od ciebie sie dowiedzialem, ze sa wykropkowane
delphiak 8 01 września 2006, 13:46

shw: na pewno sie da zrobic jak mowisz bo sam to ostatnio robiłem :) czyli robic normalnego linka z href i podpinajac pod niego zdarzenie na onclick. wtedy i otwierajac w nowym oknie dostaniemy to co trzeba i klikajac na linku (wtedy poprzez JS ) i gdyby tak byly wszystkie serwisy/strony robione to nie bylo by tyle PRZECIW dla tego szerokopojetego ajaxa
Zenon Ziembiewicz 9 01 września 2006, 14:11

Moja opinia jest taka, ze tych kropek za cholere nie widze ;) Gdyby kropkowanie bylo bardziej wyrazne (na przyklad krotkimi liniami ciaglymi) byloby bardziej uzyteczne. Obecnie - nie robi mi to roznicy.
Michał Moroz 10 01 września 2006, 14:15

Accessibility - przełącznikowi, któremu mogę zapewnić alternatywne, niejavascriptowe rozwiązanie, daję <a />, temu, któremu nie, daję <span />.

W efekcie żaden przełącznik, który zwraca nowe dane, nie może być wykonany za pomocą tylko JavaScriptu.
Piotr Konieczny 11 01 września 2006, 14:42

Riddle, chyba mozliwe byloby zrobic cos takiego na wlasna reke:

1. Pisze sobie styl css, w ktorym jest:

a[onclick] { jakis wyrozniajacy link styl }

(ew. cos w deseń a[onclick~=javascript] -- chociaz operator ~= jest chyba jakis ograniczony - space separation is a must?)

2. Dodaje do przegladarki (Opera potrafi, wierze ze Fx tez)

3. Wiem, w ktore linki nie klikac srodkowym :-)

Jesli sie myle, poprawcie.
Adam 12 01 września 2006, 15:18

Piotr, mylisz się bo jeśli stosujesz "unobtrusive javascript" to nie można polegać na obecności atrybutu onclick.
Możnaby spróbować skryptu który sprawdzałby wartości w kolekcji elementów na zdarzeniu onclick i odpowiednio stylował dany element.
jam łasica 13 01 września 2006, 15:29

Po najechaniu myszą na javascriptowy link, powinien pojawiać się gdzieś napis "nie klikaj środkowym przyciskiem, frajerze", czy coś w tym stylu ;)
patryk_t 14 01 września 2006, 15:37

kilka razy zastanawiałem się, czy jak kliknę na link pod filmikiem to czy przeniesie mnie na jakąś stronę przerywając wyświetlanie filmu, czy też sprawę załatwi AJAX. No i zawsze byłem mile zaskoczony, aż wreszcie zapamiętałem ;)

imho taki sposób wyróżniania linków jest bardzo przydany. Tylko wiele stron posiada kropkowane linki, które mogą być rozumiane przez niektóre osoby jako odwołania do funkcji JS, do póki sami tego nie sprawdzą. To po pierwsze. Po drugie należałoby oswoić użytkowników stron z funkcją podkreślenia odnośników.
neo 15 01 września 2006, 16:42

Genialne? Nie sądzę.

Wyłącz javascript i uruchom youtube. Patrzysz - more (link). Myślisz - fajnie się zapowiada - kliknę. A tu nic - na pasek adresu wskakuje jakiś śmieszny kwadracik... Zwykły użytkownik po prostu opuści stronę z twierdzeniem - nie działa.

Moja opinia jest taka, że wszystkie elementy, które bez js mają być bezużyteczne muszą być wstawione na stronę za pomocą js.

Co do samego ostylowania - prawdopodobnie mało kto zauważy, ale dla bystrych się może przydać.

Chłopcy z youtube powinni przeczytać pornela (http://pornel.net/onclick).
Thinker 16 01 września 2006, 17:44

neo:
ale gupoty gadasz. jak ktos ma wylaczonego JS, to po pierwsze nie jest zwyklym n00b userem, tylko musial wiedziec co wylacza, a drugie to to, ze musial liczyc sie z tym, ze prezstanie mu dzialac 1/3 stron
Ktos 17 01 września 2006, 17:46

neo: Ale nam nie chodzi o to, że jak się wyłączy JS to jest źle i że zdarzenia się powinno też przez JS dodawać. Tutaj chodzi o stylowanie tego, co JS wykorzystuje i jest całkowicie niezależne od tego o czym mówisz (co jest swoją drogą bardzo dobrą praktyką i gorąco zachęcam do jej stosowania).
citizen 18 01 września 2006, 18:15

> Ten sposób oznaczania linków wydaje mi się superużyteczny

Ja też dopiero teraz zwróciłem uwagę, że tam są kropki.
Riddle 19 01 września 2006, 20:12

Z tym zauważeniem, że tam są kropki to w sumie dlatego, że kropkowanie co 2px jest bardzo dobrze widoczne na LCD, na CRT widać takie coś jak 50% oryginalnego koloru linia ciągła (świadczy o tym zakończenie tego wpisu: http://perfectionorvanity.com/2006/01/27/border-style-dotted-a-przegladarki/ kiedy jeszcze miałem CRT oraz wszelkie pixel fonty, które dopiero teraz umiem odczytać).

JS powinien być lepiej tam zrobiony, czyli jeśli nie ma JS-a to dostajemy link wykonujący po stronie serwera coś i zwracający nową stronę. Mi jednak chodziło o samą konwencję, wydaje mi się ona bardzo fajna.
neo 20 01 września 2006, 20:44

Thinker, mógłbyś być trochę bardziej kulturalny w swoich wypowiedziach? Każdy ma konsytucyjne prawo mieć inne zdanie niż Ty.

Myślę, że każdy powinien zwracać uwagę na to, czy jego strona działa po wyłączeniu takowego dobrodziejstwa jakim jest javascript. Nie ważne, czy będzie miał do czynienia z kimś zaawansowanym, czy tylko zwykłym użytkownikiem.

To, co powiedziałem, rzeczywiście odbiega nieco od tematu, ale zauważ, że po wyłączniu javascript to ostylowanie traci jakikolwiek sens. Wniosek jest jeden - trzeba go nadawać dynamicznie lub jak już mówiłem - pozbyć się niedziałających linków (a raczej tworzyć te działające ;) )
Michał Moroz 21 01 września 2006, 20:51

@neo: I tak, i nie. Przy dużej ilości tych generowanych przez JavaScript upiększaczy, całość może dość przyciężko działać, mojej maszyny skromnym zdaniem. :)
Bigismall 22 01 września 2006, 21:43

Uważam, że powinno się stosować mimowszystko element <a /> do linków, zarówno tych standardowych jak i javascriptowych. Nie ma bowiem innego semantycznie równoważnego elementu, któremu można by przypisać podobną rolę co <a />. W dobie AJAXa dynamicznie przydzielanych zdarzeń itd. wspominanie o wyłączonym javascript uważam za bezcelowe, jeśli pod uwage bierzemy urządzenia typu PC. Telefony, palmtopy itd... to odrębna historia i samo wykonanie strony bez javascriptu nie przesądzi o jej zwiększonej dostępności na tych urządzeniach.
Thinker 23 01 września 2006, 22:54

neo:
A to brak kultury nie zgadzac sie z Twoim zdaniem?

Wracajac do wylaczania JS - powiedz mi ktory user wie co to JS?
Kto tak naprawde JSy wylacza?
I jak napisał Michał Moroz - po co dodatkowo niepotrzebnie obciazac przegladarke?

Riddle:
Chyba miales mocno zajechanego tego CRT :P
Na moim 19" kropki sie zlewaja w linie tak przy 2048x1536.. Przy 1280x960 nie ma szans zeby sie cos zlalo.

A co do pytania czy uzywac a-hrefow - to imho jak najbardziej tak.
Puryzm jezykowy niekoniecznie idzie z praktycznoscia i uzytecznoscia.
shfx 24 02 września 2006, 02:05

Thinker:

Jakbyś był panem wielkie "P" - oldschoolowym informatykiem, pracującym w VIII LO w Rzeszowie, który uczy dzieci ze "są pamięci RAM które maja 100mb 200mb i 500mb", to byś wyłączał Js na każdym stanowisku w szkole "bo poco ma być włączone" =). Tak samo jak zainstalował program zwany Opiekun żeby ludzie po stronach pornograficznych nie chodzili :). Na razie walczymy z systemem i udało nam sie złamać hasło w jakieś 15 min ;). Ale nie o tym mailem pisać.. Po prostu są ludzie którzy nie używają Js, IMHO ok 5-6% w tym osoby niepełnosprawne, niewidome, etc i ograniczanie możliwości strony www tylko dlatego ze są niepelnosprytni jest trochę niesprawiedliwe.
Poczytaj trochę o accessibility.

A jeżeli chcecie zrobić cos co będzie bardzo accessible i nawet takie webdwazero to polecam zacząć planować użycie Js (omg! ajaxa tesh ;P) przed rozpoczęciem kodowania.. a zaimplementowanie go po tym jak cała aplikacja będzie działała jak należy bez Js. Ktoś o tym pisał na jednym z obcojęzycznych blogów.

Wtedy można robić takie akcje:
<pre>
...
getElementsByClassName('ajax').each(turnIntoAjax);
...
</pre>

gdzie turnIntoAjax() bedzie sprawdzalo i podpinało event do każdego linka z klasą 'ajax' po czym podmieni tą nazwę
klasy na np. 'ajaxed' a potem w css:

<pre>
...
a.ajaxed { border-bottom:1px dotted rgb(250,0,0) !important }
...
</pre>

PS.
02:03 :F ide zrobic sobie kawe...
Aule 25 02 września 2006, 11:13

Dobre, dobre.
Tyhagara 26 13 września 2006, 01:08

Co do linków to 'a' powinno działać bez względu na to, czy mam włączony CSS, JS, grafikę, czy co tam jeszcze. Ponieważ 'a' jest elementem strukturalnym i jeśli jest poprawnie zastosowany to działa z poziomu struktury, a nie z poziomu czegoś innego.