Advanced Design Techniques: JavaScript to the Rescue - ppk

8/11/2019 Advanced Design Techniques: JavaScript to the Rescue - ppk

1/73

Advanced DesignTechniques:

JavaScript to the Rescue

Peter-Paul Koch (ppk)http:!!!"quirks#ode"org$T% &on'erence ct" *+th *,,
http://www.quirksmode.org/http://www.quirksmode.org/


2/73

.//0


3/73

i' (1ro!ser 22 34etscape3) docu#ent"!rite

(351od6 1ackground27pi81g9nn"gi'73);

else i' (1ro!ser 22 3


4/73

i' (1ro!ser 22 34etscape3) docu#ent"!rite

(351od6 1ackground27pi81g9nn"gi'73);

else i' (1ro!ser 22 3


5/73

>ast 'or!ard to *,,


6/73

?sing JavaScriptresponsi1l6

to plug a 'e! holesin 1ro!sers3 &SS

support


7/73

@e1ra ists


8/73

li:nth-child(even) B1ackground-color: C,,cc,,;

pera: Eesire'o8: 4o

Sa'ari: 4o


9/73

5ul id27navigation75li5a hre'27C7%6 1ooks5a5li

5li5a hre'27C7ther 1ooks5a5li5ul

5pTitles5p5ul

5liPPK on JavaScript5li5liDesigning !ith Fe1 Standards5li

5liGulletproo' Fe1 Design5li5ul


10/73

5ul id27navigation75li5a hre'27C7%6 1ooks5a5li

5li5a hre'27C7ther 1ooks5a5li5ul

5pTitles5p5ul class27He1ra7

5liPPK on JavaScript5li5liDesigning !ith Fe1 Standards5li

5liGulletproo' Fe1 Design5li5ul


11/73

Rule C.

?se hooks to indicate!hich IT% ele#ents

should 1e a''ected"T6pical hooks:

idclass


12/73

var lists 2 get=le#entsG6Tag4a#es(3olul3);

'or (var i2,list;list2listsi;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

lisN"st6le"1ackground&olor 2 3C,,cc,,3;


13/73


14/73

Rule C*


15/73

>ocus:'ocus


16/73

input:'ocus B

1order-!idth: thick;

pera: Ees>ire'o8: EesSa'ari: Ees


17/73

input"on'ocus 2 'unction () Bthis"st6le"1orderFidth 2 3thick3;

input"on1lur 2 'unction () Bthis"st6le"1orderFidth 2 33;


18/73

Rule C

JavaScript needs #oreprecise instructions than

&SS"(


19/73

input"on'ocus 2 'unction () Bthis"st6le"1orderFidth 2 3thick3;

input"on1lur 2 'unction () Bthis"st6le"1orderFidth 2 33;

i ' ' i () B


20/73

input"on'ocus 2 'unction () Bthis"st6le"1orderFidth 2 3thick3;this"class4a#e L2 3 'ocused3;

input"on1lur 2 'unction () B

this"st6le"1orderFidth 2 33;this"class4a#e 2

this"class4a#e"replace('ocusedg33);

"'ocused B1order-!idth: thick;


21/73

Rule C+

Add class na#es; do notchange st6les"

(=ase o' #aintenance)Adding class na#es keeps all &SSclasses intact"


22/73




var lis 2 list"get=le#entsG6Tag4a#e(3li3);

'or (var N2,;N5lis"length;NL2*) B



23/73




var lis 2 list"get=le#entsG6Tag4a#e(3li3);

'or (var N2,;N5lis"length;NL2*) B


lisN"class4a#e 2 3even3;


24/73

:hover


25/73

5ul id27navigation7

5li5a hre'27C7%ulti#edialiHe5a5li

5li5a hre'27C7ANa8i'65a

5ul

5li5a hre'27C7Fe1 .",5a5li

5li5a hre'27C7Fe1 *",5a5li

5li5a hre'27C7Fe1 ",5a5li5ul5li

5ul


26/73

li ul Bdispla6: none;


27/73

li:hover ul Bdispla6: 1lock;

ire'o8: EesSa'ari: Ees

pera: Ees


28/73

li"on#ouseover 2 'unction () Bthis"class4a#e L2 3 hovered3;

li"on#ouseout 2 'unction () Bthis"class4a#e 2

this"class4a#e"replace(hoveredg33);

li"hovered ul Bdispla6: 1lock;

li on#ouseover 2 'unction () B


29/73

li"on#ouseover 2 'unction () Bthis"class4a#e L2 3 hovered3;



li"hovered ul Bdispla6: 1lock;


30/73


31/73

=vent 1u11ling

%ouse events onl6M


32/73

li"on#ouseover 2 'unction () B


33/73

li"on#ouseover 'unction () Bthis"class4a#e L2 3 hovered3;



ul"on#ouseover 2 'unction () B


34/73

ul"on#ouseover 'unction () Bvar li 2 'ind correct li;li"class4a#e L2 3 hovered3;

ul"on#ouseout 2 'unction () B

var li 2 'ind correct li;li"class4a#e 2

li"class4a#e"replace(hoveredg33);

=vent delegation


35/73

=vent 1u11lingThe do!n side

li #ouseover li #ouseout a #ouseover


36/73

li"#ouseover li"#ouseout a"#ouseovera"#ouseout li"#ouseover li"#ouseout

ul"on#ouseover2 'unction () B


37/73

() Bvar li 2 'ind correct li;li"class4a#e L2 3 hovered3;


var li 2 'ind correct li;i' (this event is relevant)

li"class4a#e 2li"class4a#e"replace(hoveredg33);


38/73

a"on#ouseover a"on#ouseout

Rule C


39/73

Rule CFhen creating a dropdo!n#ake sure the 5ul and5lis have no visi1le area"

(Keep it si#ple")


40/73

The true JavaScript

equivalent o' :hoveris not #ouseoverout


41/73

The true JavaScript

equivalent o' :hoveris #ouseenterleave


42/73

li"#ouseenter li"#ouseleave

li"on#ouseenter 2 'unction () B


43/73

var li 2 'ind correct li;this"class4a#e L2 3 hovered3;

li"on#ouseleave 2 'unction () B

var li 2 'ind correct li;i' (this event is relevant)this"class4a#e 2


Rule CQ


44/73

Rule CQ#ouseenter and #ouseleaveare the true JavaScriptequivalents o' :hover"

(


45/73

var li 2 'ind correct li;li"class4a#e L2 3 hovered3;


var li 2 'ind correct li;i' (this event is relevant)li"class4a#e 2


ul"on#ouseover 2 'unction () Bli 'i d li


46/73

var li 2 'ind correct li;li"class4a#e L2 3 hovered3;


var li 2 'ind correct li;i' (this event is relevant)li"class4a#e 2


That3s it rightO

FrongM


47/73

Device


48/73


49/73

:hover and on#ouseoverare #ouse onl6"

Fe need a ke61oard handler

:'ocus on'ocus

li:hover ul li:'ocus ul B


50/73

li:hover ul li:'ocus ul Bdispla6: 1lock;

li:hover ul li:'ocus ul B


51/73

li:hover ul li:'ocus ulBdispla6: 1lock;

Doesn3t !ork"

Eou can3t put the ke61oard'ocus on an 5li"

Rule C


52/73

Rule C

nl6 links 'or# 'ields andthe location 1arcan receive

the ke61oard 'ocus in all1ro!sers"

li:hover ul(li 5 a:'ocus) ul B


53/73

( ) Bdispla6: 1lock;

(Don3t tr6 this at ho#e")


54/73

Rule C0


55/73

Rule C0

&SS currentl6 does notallo! ke61oard-accessi1le

hover e''ects"(Eou need JavaScript 'or per'ect

accessi1ilit6")

li"on#ouseover2 li"on'ocus 2 'unction () Bthis class4a#e L2 3 hovered3;


56/73

this"class4a#e L2 hovered ;

li"on#ouseout2 li"on1lur 2 'unction () Bthis"class4a#e 2



57/73

&SS:


58/73

li:hover ul Bdispla6: 1lock;

JavaScript:

li"on#ouseover 2 'unction () B

this"class4a#e L2 3 hovered3;

&SS:


59/73

(li 5 a:'ocus) ul Bdispla6: 1lock;

JavaScript:

a"on'ocus 2 'unction () B

this"parent4ode"class4a#e L2 3 hovered3;

ul"on#ouseover 2 'unction () Bvar li 2 'ind correct li;


60/73

var li 'ind correct li;li"class4a#e L2 3 hovered3;

a"on'ocus 2 'unction () B

this"parent4ode"class4a#e L2 3 hovered3;

ul"on#ouseout 2 'unction () Bvar li 2 'ind correct li;


61/73

var li 'ind correct li;i' (this event is relevant)

li"class4a#e 2li"class4a#e"replace(hoveredg33);

a"on1lur 2 'unction () Bi' (this event is relevant)

this"parent4ode"class4a#e 2

this"parent4ode"class4a#e"replace(hoveredg33);


62/73

:1e'ore and:a'ter

a"e8ternal:a'ter B


63/73

Bcontent: (e8ternal link)7;

>ire'o8: EesSa'ari: Eespera: Ees


64/73

"createTe8t4ode(3 (e8ternal link)3);

var links 2 docu#ent

"get=le#entsG6Tag4a#e(3a3);

'or (var i2,;i5links"length;iLL) Bi' (linksi"class4a#e M2 3e8ternal3) continue;

linksi"append&hild(a'ter4ode

"clone4ode(true));

Fhat happens i' 1oth the &SS and theJavaScript are e8ecutedO


65/73

JavaScript are e8ecutedO

Their 'indings (e8ternal link) (e8ternal link)suggest """

(ops)


66/73

Situation:- JavaScript 'or


67/73

5M--i'


68/73


69/73

(Personal opinion !arning)


70/73

The &SS content propert6 should not 1eused"?sing it is akin to using te8t in i#ages"

Te8t 1elongs either in the IT% structuralla6er or in the JavaScript 1ehavior la6er;1ut never in the &SS presentation la6er"


71/73

?sing JavaScriptresponsi1l6

to plug a 'e! holesin 1ro!sers3 &SS

support


72/73

4eed an6 helpO


73/73

Iave 'unM

Documents

Advanced Design Techniques: JavaScript to the Rescue - ppk