Pamiętajmy o outline ;-)
12 lipca, 2007
Na głównej Joggera i Techblogu już wcześniej widziałem ten problem - po kliknięciu na link "do góry" pojawia się outline i to nie taki wokół samego elementu (to bym jeszcze przeżył), ale taki co ciągnie się przez pół strony. Z racji tego, że "problem" występuje tylko na Firefoksie to załatwiłem go dodając króciutką regułę do rozszerzenia Stylish:
@-moz-document domain(jogger.pl), domain(techblog.pl) {
div.wrap p a{
outline: none;
}
}
I od razu mi było lepiej ;D
Ale jeszcze bardziej powaliła mnie strona WordPressa w sekcji download:
Jak widać na Joggerze i Techblogu "problem" jeszcze nie rzuca się tak w oczy, ale na stronie pobierania WP linie pojawiają się na tekście i user zostaje wręcz zmuszony do kliknięcia gdzieś na stronie by się tego pozbyć...
Wiem - może się czepiam, ale mnie to zirytowało trochę - dla WP stylu nie szykowałem bo bywam tam raz na kilka miesięcy - na Joggerze i Techblogu ciut częściej :-P
Niby to szczegóły ale irytujące jak się je spotyka na profesjonalnych witrynach, z których korzysta mnóstwo ludzi - w tym ogromna rzesza userów ognistego liska (znając życie to ten outline to nie tylko kaprys Firefoksa, ale samego Gecko więc trzeba jeszcze doliczyć userów wszystkiego co geckowate ;-) ). Zwłaszcza, że ten "problem" rozwiązuje jedna dodatkowa linijka w CSS - dla programisty jedna linijka więcej, a dla mnóstwa ludzi jedno kliknięcie mniej (oczywiście w odniesieniu do strony WP)...
Swoją drogą mała ciekawostka z kodu Joggera i Techbloga :
Widać jeszcze nie wszystko zrobione ;)
Komentarze do wpisu "Pamiętajmy o outline ;-)":
1.
Łukasz :] napisał(a):
12 lipca 2007, 00:33:33
Ja na outline nie zwracam uwagi (nawet nie wiedziałem, że to się tak nazywa) a z tym co znalazłeś w kodzie jogg/tech to fajnie :D może jeszcze jakieś ukryte niespodzianki są? A panel sprawdzałeś? :D
2.
wzs napisał(a):
12 lipca 2007, 00:36:18
Hmm… Przerzucanie usuwania tego outline na użytkowników to porażka. Zwrócilem na to uwagę przy jakiejś zabawie z CSS
3.
carlson napisał(a):
12 lipca 2007, 00:36:44
http://tmp.carlson.pl/jogger.png – też nie wszystko zrobione ;-)
4.
Dziudek napisał(a):
12 lipca 2007, 00:36:54
@Łukasz – nie analizowałem tak dogłębnie kodu ;) Ja tylko patrzę tam gdzie w danej sytuacji potrzebuję ;D A co do outline – jak widzisz Ciebie to w ogóle nie rusza, a mnie wręcz drażni zwłaszcza w takiej formie jak na WP ;)
@carlson - jak wiele można się z kodu strony dowiedzieć :D
@wzs - ano porażka, ale jak administracji się nie chce to userzy radzić muszą sobie sami ;-)
5.
D4rky napisał(a):
12 lipca 2007, 01:19:14
problemem jest indentowanie tekstu na lewo żeby go ukryć. wystarczy danemu elementowi przydzielić overflow: hidden; żeby outline wróciło do normy.
też mnie to drażni ;) chyba na stronie jquery walnęli się tak samo
6.
Riddle napisał(a):
12 lipca 2007, 01:26:49
Outline to nie jest porażka, tylko błąd Firefoksa. Nie będę ukrywał bardzo ważnej właściwości ze względów dostępnościowych tylko dlatego, że komuś się wydaje że to brzydko wygląda.
Btw, po co taki wielki hack, skoro wystarczy dać
-moz-outline: 0;Nie mówiąc już, że wystarczy wrzucić taki link w
div/spani dać temu elementowi nadrzędnemuoverflow: hidden. Dlaczego nie do linka? Bo klikając w niego (onmousedown) nie można „uciec” przesuwając mychę i odklikując (onmouseup) – i tak przejdziemy pod link.7.
Riddle napisał(a):
12 lipca 2007, 01:27:02
Kurde, napraw ten <code>! :/
8.
Dziudek napisał(a):
12 lipca 2007, 01:51:51
@Riddle – specjalnie dla Ciebie poprawiłem CSS – normalnie miałem go już nie ruszać do czasu publikacji nowego layoutu, ale już mi tak głowę suszyłeś o to, że się poddałem ;)
Co do mojego „hacka” – wiesz jakoś tylko na WP i Joggerze na to trafiłem (przynajmniej zostało mi w pamięci) i nie myślałem od razu o rozwiązaniu globalnym ;)
9.
Off napisał(a):
12 lipca 2007, 02:37:39
Dziudek, czekam na twój layout ;)
10.
Dziudek napisał(a):
12 lipca 2007, 02:39:23
@Off – moje w tym layoucie będzie tylko XHTML, CSS i JS ;) Strona graficzna będzie zrobiona przez grafika ;] Już dawno stwierdziłem, że nie da się być świetnym grafikiem i programistą dlatego estetykę zostawię fachowcom ;)
11.
Off napisał(a):
12 lipca 2007, 02:41:36
Ja tam grafikę umiem robic, tylko w GraphicsGale. PS to tylko z tutorialów. Byłoby lepiej gdybym miał motywacją do ćwiczenia. Mimo wszystko wolę XHTML/CSS
@Dziudek: Czemu jeszcze nie śpisz ;P
12.
Dziudek napisał(a):
12 lipca 2007, 02:47:34
@Off – ja generalnie znam się trochę na grafice, ale dla mnie to zbyt takie humanistyczne – nie tak ścisłe jak programowanie. Po prostu mam zbyt mało pomysłów na grafikę, szablonowe layouty mnie średnio pociągają...
A co do spania – nigdy o tej porze nie śpię ;P
13.
Michał Górny napisał(a):
12 lipca 2007, 11:52:22
> dla programisty jedna linijka więcej, a dla mnóstwa ludzi jedno kliknięcie mniej
Moim zdaniem ten błąd akurat należałoby kwalifikować jako bug silnika przeglądarki, i rozwiązać po jego stronie, a nie oczekiwać od webmastera wstawiania hacków.
14.
Pizzadude napisał(a):
12 lipca 2007, 12:01:38
Jakie hacki? Ja ten bug rozwiązuję dodając jedną linijkę w CSSie do Global Reset, a mianowicie:
:focus { outline: 0; }15.
Michał Górny napisał(a):
12 lipca 2007, 12:04:08
Nie, to w ogóle nie jest hack. To na pewno zachowanie przeglądarki jest całkowicie słuszne, i tak dla jaj je usuwamy.
No, chyba że teraz przechodzimy do określania Gecko „złem koniecznym”, jak Internet Explorer, z którego bugami trzeba na każdym kroku się liczyć, bo twórcy mają gdzieś ich poprawienie…
16.
D4rky napisał(a):
12 lipca 2007, 13:36:52
MGórny/Peres – tak, to JEST całkowicie słuszne zachowanie przeglądarki. Przycisk ma tekst, który jest indentowany do tyłu, ale tekst NADAL jest elementem przycisku, ponieważ overflow nie jest ustawiony na hidden (nie ukrywa elementów poza określonymi wymiarami).
Z CSS joggera:
Dodanie overflow: hidden; naprawia problem: outline pojawia się tylko tam gdzie powinno, bo tekst poza elementem jest nie tylko wycinany na maksa w lewo ale też ukryty jak trzeba.
Będzie dobrze, jeśli przestaniesz operofanbojować jak popieprzony, bo racji nie masz a robisz z siebie ignoranta.
Sic! Riddle już to wyjaśnił. Tym gorzej dla ciebie ;)
17.
Michał Górny napisał(a):
12 lipca 2007, 13:41:49
Och, będzie lepiej, jeśli zaczniesz myśleć, co autor komentarza mógł mieć na mysli, zamiast antyoperafanbojować na każdym kroku.
Miałem na myśli — czy słuszne jest w ogóle stosowanie outline w domyślnym stylu? Bo nie kojarzy mi się to ani trochę z nowoczesnością — raczej jakieś staromodne, brzydkie, nieprzydatne cóś.
A że „nowoczesna semantyka” oparta jest na dziwacznych pomysłach-hackach to już inna bajka.
18.
D4rky napisał(a):
12 lipca 2007, 13:44:14
Moim zdaniem outline się przydaje. Jak ci nie pasuje: wyłącz. EOT.
19.
wzs napisał(a):
12 lipca 2007, 13:58:09
D4ky: M.G. używa Opery i wyłączać właśnie ne musi :)Riddle: ja nie napisałem że outline to porażka. Akurat dla mnie jak i dla większości użytkowników jest niepotrzebne, dlatego zgadzam się z Michałem, ze domyślnie to raczej powinno być ustawione inaczej.Ale żeby zakończyć spór, poklnijmy trochę wszyscy na IE, który nawet outline: none nie rozumie
20.
Dziudek napisał(a):
12 lipca 2007, 17:50:26
@wzs – lepiej już na nic nie klnijcie ;)
@D4rky – niby podajesz się w swojej wypowiedzi na to co napisał Riddle, ale nie zauważyłeś, że on sam pisze iż to jest błąd Firefoksa. A właściwie to Gecko. I ciężko się z tym stwierdzeniem nie zgodzić, bo to zjawisko występuje tylko w „geckowatych” – IE, Opera oraz Safari nie mają z tym problemu, więc IMHO jest coś na rzeczy… Michał Górny ma rację pisząc, że powinno to być domyślnie wyłączone – jak chcesz mieć outline to przecież sobie włączysz skoro uważasz to za tak niezwykle użyteczną rzecz.
21.
Riddle napisał(a):
12 lipca 2007, 18:56:05
Pieprzycie hipolicie. Zachowanie Gecko jest be, outline tam ma jeszcze dwa błędy, które czasami przeszkadzają.
Ważne jest coś innego – usuwanie outline z linków to przestępstwo na miarę robienia ich w kolorze tekstu.
Pizzadude, gratulacje z usuwania fokusu. Czy mamy 1990?
22.
Dziudek napisał(a):
12 lipca 2007, 19:01:15
@Riddle – ‘usuwanie outline z linków to przestępstwo na miarę robienia ich w kolorze tekstu’ – czyli pozostaje nam robić to sobie samemu, jeśli czuje się taką potrzebę ;)
23.
D4rky napisał(a):
12 lipca 2007, 19:02:50
Dziudek – DOKŁADNIE!! I na tym polega właśnie wolność w sieci – nie nakładasz na innych swoich nawyków . Przeszkadza ci outline – to usuń, ale nie zmuszaj do jego utraty tych XX% ludzi, którzy uważają to za przydatne.
24.
Dziudek napisał(a):
12 lipca 2007, 19:09:14
@D4rky – wiesz to prawda, ale z drugiej strony miło by było gdyby te bugi z outline wywalili z Gecko – wtedy by nie było takich „problemów”. Jak to mówią „diabeł tkwi w szczegółach” ;)
25.
Riddle napisał(a):
12 lipca 2007, 19:18:01
Nie rozumiecie * 10000.
Outline jest odpowiedzią przeglądarki na to, że kliknąłeś w link. Bez outline przechodzenie od strony do strony jest nieintuicyjne.
I ok – można sobie zrobić własny styl dla
:focus, ale nie będzie on spójny i nie będzie przez to użyteczny.Chciałbym, też zauważyć że outline jest częścią CSS2.1, więc nie podstawowego CSS1, a jego dostępność nie oznacza że każdy ma sobie wyłączać kropeczki, bo mu się nie podobają. To jest sieć do diabła, a nie magazyn!
26.
Dziudek napisał(a):
12 lipca 2007, 19:24:05
@Riddle – ‘To jest sieć do diabła, a nie magazyn!’ – ok, ale to jest też MOJA przeglądarka ;) Jeżeli nie widzę jakiegoś drastycznego spadku użyteczności po wyłączeniu outline u siebie, to czemu mam go oglądać tak jak ma to miejsce w wypadku strony głównej Joggera, Techbloga czy Wordpressa ? Zwłaszcza, że jak widzisz po moim stylu CSS, który prezentuję we wpisie – nie wyłączam outline dla wszystkich stron i wszystkich elementów, a tylko dla dwóch domen w dwóch miejscach ;)
27.
Riddle napisał(a):
12 lipca 2007, 19:25:14
UserCSS – ok.
Wyłączanie dla niektórych elementów, jeśli się zapewniło inny stan
:focus– ok.Resetowanie outline dla wszystkiego – nie ok. Nawet w Meyerowym reset.css jest komentarz, że należy później ustawić fokus oddzielnie.
28.
Dziudek napisał(a):
12 lipca 2007, 19:30:30
@Riddle – no czyli jednak warto napisać trochę większy UserCSS ;) Bo sam outline w sobie aż tak mnie nie drażni – chodzi mi tylko o sytuacje kiedy jest go „za dużo” – czyli tam gdzie już z 10 razy wymieniałem… Ale już przynajmniej rozumiem po tej całej dyskusji, że na stronach Joggera „błędu” nie ma ;)
29.
Hash napisał(a):
12 lipca 2007, 21:25:39
A ja skorzystam z okazji i spytam riddle’a : dlaczego perfectionorvanity.com nie działa?
30.
Riddle napisał(a):
12 lipca 2007, 22:28:13
A co masz napisane? :]
31.
carlson napisał(a):
12 lipca 2007, 22:29:33
@Riddle: a zdradzisz kiedy będzie ‘po’? ;-)
Dodaj komentarz: