Advanced Design

Techniques:
JavaScript to the Rescue
Peter-Paul Koch (ppk)
http:!!!"quirks#ode"org
$T% &on'erence( )ct" *+th( *,,-

.//0

i' (1ro!ser 22 34etscape3)
docu#ent"!rite
(351od6 1ackground27pi81g9nn"gi'7:3);
else i' (1ro!ser 22 3<=3)
docu#ent"!rite
(351od6 1ackground27pi81g9ie"gi'7:3);
5noscript:
51od6 1ackground27pi81g9nn"gi'7:
5noscript:

i' (1ro!ser 22 34etscape3)
docu#ent"!rite
(351od6 1ackground27pi81g9nn"gi'7:3);
else i' (1ro!ser 22 3<=3)
docu#ent"!rite
(351od6 1ackground27pi81g9ie"gi'7:3);
5noscript:
51od6 1ackground27pi81g9nn"gi'7:
5noscript:
%a61e this isn3t
such a good idea
a'ter all"
(Still( the principle
re#ains valid")

>ast 'or!ard to *,,-

?sing JavaScript
responsi1l6
to plug a 'e! holes
in 1ro!sers3 &SS
support

@e1ra Aists

li:nth-child(even) B
1ackground-color: C,,cc,,;
D
)pera: Ees
<=: 4o
>ire'o8: 4o
Sa'ari: 4o

5ul id27navigation7:
5li:5a hre'27C7:%6 1ooks5a:5li:
5li:5a hre'27C7:)ther 1ooks5a:5li:
5ul:
5p:Titles5p:
5ul:
5li:PPK on JavaScript5li:
5li:Designing !ith Fe1 Standards5li:
5li:Gulletproo' Fe1 Design5li:
5ul:

5ul id27navigation7:
5li:5a hre'27C7:%6 1ooks5a:5li:
5li:5a hre'27C7:)ther 1ooks5a:5li:
5ul:
5p:Titles5p:
5ul class27He1ra7:
5li:PPK on JavaScript5li:
5li:Designing !ith Fe1 Standards5li:
5li:Gulletproo' Fe1 Design5li:
5ul:

Rule C.
?se hooks to indicate
!hich IT%A ele#ents
should 1e a''ected"
T6pical hooks:

id

class

var lists 2 get=le#entsG6Tag4a#es(3ol(ul3);
'or (var i2,(list;list2listsJiK;iLL) B
i' (list"class4a#e M2 3He1ra3) continue;
var lis 2 list"get=le#entsG6Tag4a#e(3li3);
'or (var N2,;N5lis"length;NL2*) B
lisJNK"st6le"1ackground&olor 2 3C,,cc,,3;
D
D

Fhat i' JavaScript is not supportedO
?sers !on3t see the He1ra list
1ut the6 don3t kno! it3s supposed to 1e
there(
and the e''ect is not vital( an6!a6"

Rule C*
<' JavaScript is not
supported( usa1ilit6 su''ers"
(&an3t 1e helped")
(Sorr6")

>ocus
:'ocus

input:'ocus B
1order-!idth: thick;
D
)pera: Ees
>ire'o8: Ees
Sa'ari: Ees
<=: 4o

input"on'ocus 2 'unction () B
this"st6le"1orderFidth 2 3thick3;
D
input"on1lur 2 'unction () B
this"st6le"1orderFidth 2 33;
D

Rule CP
JavaScript needs #ore
precise instructions than
&SS"
(<t3s stupider 1ut #ore versatile")

input"on'ocus 2 'unction () B
this"st6le"1orderFidth 2 3thick3;
D
input"on1lur 2 'unction () B
this"st6le"1orderFidth 2 33;
D

input"on'ocus 2 'unction () B
this"st6le"1orderFidth 2 3thick3;
this"class4a#e L2 3 'ocused3;
D
input"on1lur 2 'unction () B
this"st6le"1orderFidth 2 33;
this"class4a#e 2
this"class4a#e"replace('ocusedg(33);
D
"'ocused B
1order-!idth: thick;
D

Rule C+
Add class na#es; do not
change st6les"
(=ase o' #aintenance)
Adding class na#es keeps all &SS
classes intact"

var lists 2 get=le#entsG6Tag4a#es(3ol(ul3);
'or (var i2,(list;list2listsJiK;iLL) B
i' (list"class4a#e M2 3He1ra3) continue;
var lis 2 list"get=le#entsG6Tag4a#e(3li3);
'or (var N2,;N5lis"length;NL2*) B
lisJNK"st6le"1ackground&olor 2 3C,,cc,,3;
D
D

var lists 2 get=le#entsG6Tag4a#es(3ol(ul3);
'or (var i2,(list;list2listsJiK;iLL) B
i' (list"class4a#e M2 3He1ra3) continue;
var lis 2 list"get=le#entsG6Tag4a#e(3li3);
'or (var N2,;N5lis"length;NL2*) B
lisJNK"st6le"1ackground&olor 2 3C,,cc,,3;
lisJNK"class4a#e 2 3even3;
D
D

:hover

5ul id27navigation7:
5li:5a hre'27C7:%ulti#edialiHe5a:5li:
5li:5a hre'27C7:ANa8i'65a:
5ul:
5li:5a hre'27C7:Fe1 .",5a:5li:
5li:5a hre'27C7:Fe1 *",5a:5li:
5li:5a hre'27C7:Fe1 P",5a:5li:
5ul:5li:
5ul:

li ul B
displa6: none;
D

li:hover ul B
displa6: 1lock;
D
<= -: Ees
>ire'o8: Ees
Sa'ari: Ees
)pera: Ees
<= Q: 4o

li"on#ouseover 2 'unction () B
this"class4a#e L2 3 hovered3;
D
li"on#ouseout 2 'unction () B
this"class4a#e 2
this"class4a#e"replace(hoveredg(33);
D
li"hovered ul B
displa6: 1lock;
D

li"on#ouseover 2 'unction () B
this"class4a#e L2 3 hovered3;
D
li"on#ouseout 2 'unction () B
this"class4a#e 2
this"class4a#e"replace(hoveredg(33);
D
li"hovered ul B
displa6: 1lock;
D
<t3s %?&I #ore co#plicated than that"


=vent 1u11ling
%ouse events onl6M


li"on#ouseover 2 'unction () B
this"class4a#e L2 3 hovered3;
D
li"on#ouseout 2 'unction () B
this"class4a#e 2
this"class4a#e"replace(hoveredg(33);
D

ul"on#ouseover 2 'unction () B
var li 2 J'ind correct liK;
li"class4a#e L2 3 hovered3;
D
ul"on#ouseout 2 'unction () B
var li 2 J'ind correct liK;
li"class4a#e 2
li"class4a#e"replace(hoveredg(33);
D
=vent delegation

=vent 1u11ling
The do!n side

li"#ouseover( li"#ouseout( a"#ouseover(
a"#ouseout( li"#ouseover( li"#ouseout

ul"on#ouseover 2 'unction () B
var li 2 J'ind correct liK;
li"class4a#e L2 3 hovered3;
D
ul"on#ouseout 2 'unction () B
var li 2 J'ind correct liK;
i' (this event is relevant)
li"class4a#e 2
li"class4a#e"replace(hoveredg(33);
D

a"on#ouseover( a"on#ouseout

Rule CR
Fhen creating a dropdo!n(
#ake sure the 5ul: and
5li:s have no visi1le area"
(Keep it si#ple")

The true JavaScript
equivalent o' :hover
is not #ouseoverout

The true JavaScript
equivalent o' :hover
is #ouseenterleave
<= onl6M

li"#ouseenter( li"#ouseleave

li"on#ouseenter 2 'unction () B
var li 2 J'ind correct liK;
this"class4a#e L2 3 hovered3;
D
li"on#ouseleave 2 'unction () B
var li 2 J'ind correct liK;
i' (this event is relevant)
this"class4a#e 2
this"class4a#e"replace(hoveredg(33);
D

Rule CQ
#ouseenter and #ouseleave
are the true JavaScript
equivalents o' :hover"
(<= onl6M)
(As 6et""")

ul"on#ouseover 2 'unction () B
var li 2 J'ind correct liK;
li"class4a#e L2 3 hovered3;
D
ul"on#ouseout 2 'unction () B
var li 2 J'ind correct liK;
i' (this event is relevant)
li"class4a#e 2
li"class4a#e"replace(hoveredg(33);
D

ul"on#ouseover 2 'unction () B
var li 2 J'ind correct liK;
li"class4a#e L2 3 hovered3;
D
ul"on#ouseout 2 'unction () B
var li 2 J'ind correct liK;
i' (this event is relevant)
li"class4a#e 2
li"class4a#e"replace(hoveredg(33);
D
That3s it( rightO
FrongM

Device
<ndependenceM

:hover and on#ouseover
are #ouse onl6"
Fe need a ke61oard handler

:hover and on#ouseover
are #ouse onl6"
Fe need a ke61oard handler
:'ocus on'ocus

li:hover ul( li:'ocus ul B
displa6: 1lock;
D

li:hover ul( li:'ocus ul B
displa6: 1lock;
D
Doesn3t !ork"
Eou can3t put the ke61oard
'ocus on an 5li:"

Rule C-
)nl6 links( 'or# 'ields( and
the location 1ar can receive
the ke61oard 'ocus in all
1ro!sers"

li:hover ul( (li 5 a:'ocus) ul B
displa6: 1lock;
D
(Don3t tr6 this at ho#e")

li:hover ul( (li 5 a:'ocus) ul B
displa6: 1lock;
D
(Don3t tr6 this at ho#e")
4ot supported"
(Pit6( isn3t itO)

Rule C0
&SS currentl6 does not
allo! ke61oard-accessi1le
hover e''ects"
(Eou need JavaScript 'or per'ect
accessi1ilit6")

li"on#ouseover 2 li"on'ocus 2 'unction () B
this"class4a#e L2 3 hovered3;
D
li"on#ouseout 2 li"on1lur 2 'unction () B
this"class4a#e 2
this"class4a#e"replace(hoveredg(33);
D

li"on#ouseover 2 li"on'ocus 2 'unction () B
this"class4a#e L2 3 hovered3;
D
li"on#ouseout 2 li"on1lur 2 'unction () B
this"class4a#e 2
this"class4a#e"replace(hoveredg(33);
D
Sa#e pro1le#: 6ou can3t 'ocus on an 5li:"

&SS:
li:hover ul B
displa6: 1lock;
D
JavaScript:
li"on#ouseover 2 'unction () B
this"class4a#e L2 3 hovered3;
D

&SS:
(li 5 a:'ocus) ul B
displa6: 1lock;
D
JavaScript:
a"on'ocus 2 'unction () B
this"parent4ode"class4a#e L2 3 hovered3;
D

ul"on#ouseover 2 'unction () B
var li 2 J'ind correct liK;
li"class4a#e L2 3 hovered3;
D
a"on'ocus 2 'unction () B
this"parent4ode"class4a#e L2 3 hovered3;
D

ul"on#ouseout 2 'unction () B
var li 2 J'ind correct liK;
i' (this event is relevant)
li"class4a#e 2
li"class4a#e"replace(hoveredg(33);
D
a"on1lur 2 'unction () B
i' (this event is relevant)
this"parent4ode"class4a#e 2
this"parent4ode"class4a#e"
replace(hoveredg(33);
D

:1e'ore and :a'ter

a"e8ternal:a'ter B
content: S (e8ternal link)7;
D
>ire'o8: Ees
Sa'ari: Ees
)pera: Ees
<=: 4o

var a'ter4ode 2 docu#ent
"createTe8t4ode(3 (e8ternal link)3);
var links 2 docu#ent
"get=le#entsG6Tag4a#e(3a3);
'or (var i2,;i5links"length;iLL) B
i' (linksJiK"class4a#e M2 3e8ternal3) continue;
linksJiK"append&hild(a'ter4ode
"clone4ode(true));
D

Fhat happens i' 1oth the &SS and the
JavaScript are e8ecutedO
S
Their 'indings (e8ternal link) (e8ternal link)
suggest """
S
()ops)

Situation:
- JavaScript 'or <=
- &SS 'or all other 1ro!sers

&onditional co##ents
5M--Ji' <=K:
5script t6pe27te8tNavascript7
src27a'ter"Ns7:5script:
5MJendi'K--:

Rule C/
<' a script is 'or <= onl6( use
an <=-onl6 !a6 o' including
it"
(&onditional co##ents)

)ption C*:
Don3t use &SS at all"
<s the S (e8ternal link)7 te8t a1solutel6
requiredO
<' so( it should go in the IT%A
(accessi1ilit6)"
<' not( is it presentation or 1ehaviorO

(Personal opinion !arning)
The &SS content propert6 should not 1e
used"
?sing it is akin to using te8t in i#ages"
Te8t 1elongs either in the IT%A structural
la6er( or in the JavaScript 1ehavior la6er;
1ut never in the &SS presentation la6er"

?sing JavaScript
responsi1l6
to plug a 'e! holes
in 1ro!sers3 &SS
support

4eed an6 helpO

Iave 'unM