For web designers, large complex applications can mean large complex battles between CSS and the DOM (Document Object Model). By taking advantage of the Shadow DOM to encapsulate each component in its own “mini DOM,” you can virtually eliminate problems like colliding selectors and visual issues and get back to the fun of web programming with simple CSS!
Author(s): Ben Farrell
Publisher: Manning
Year: 2019
Language: English
Pages: 109
contents......Page 6
introduction......Page 7
Cascade, specificity, and inheritance......Page 10
1.1 The cascade......Page 11
1.1.1 Understanding stylesheet origin......Page 15
1.1.2 Understanding specificity......Page 17
1.1.3 Understanding source order......Page 22
1.1.4 Two rules of thumb......Page 24
1.2 Inheritance......Page 25
1.3 Special values......Page 27
1.3.1 Using the inherit keyword......Page 28
1.3.2 Using the initial keyword......Page 29
1.4.1 Beware shorthands silently overriding other styles......Page 30
1.4.2 Understanding the order of shorthand values......Page 31
Layout with CSS3......Page 36
Placing elements on a line with inline-block......Page 37
Grouping element dimensions with display: table......Page 40
Mixing different length units with calc......Page 44
Controlling the box model......Page 49
Using media queries for flexible layout......Page 50
Resolution detection......Page 52
Changing layout based on orientation and aspect ratio......Page 56
Additional device-detection features......Page 57
The future of CSS layout......Page 58
Using flexible boxes for nested layout......Page 59
Using the CSS3 Grid Alignment module......Page 63
Controlling content flow with CSS3 Regions......Page 68
Making complex shapes with CSS3 Exclusions and Shapes......Page 70
Browser support......Page 73
inline-block in IE6 and IE7......Page 74
Flexboxes in Chrome, Firefox, IE, and Safari......Page 75
Summary......Page 76
9.1 Style creep......Page 78
9.1.2 Style creep into your component......Page 81
9.2 Style creep solved with the Shadow DOM......Page 83
9.2.1 When styles creep......Page 86
9.3 Shadow DOM workout plan......Page 88
9.3.1 Application shell......Page 89
9.3.2 Host and ID selectors......Page 90
9.3.3 Grid and list containers......Page 93
9.4.1 Creating the exercise component......Page 97
9.4.2 Exercise component style......Page 100
9.5 Updating the slider component......Page 102
Summary......Page 104
C......Page 105
M......Page 106
U......Page 107
Z......Page 108
Promo......Page 0
CSS in Depth......Page 2
Hello HTML 5 and CSS3......Page 3
