Back to Simple CSS
With the Shadow DOM
With chapters selected by Ben Farrell
  • September 2019
  • ISBN 9781617297496
  • 109 pages
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!

About the book

Back to Simple CSS: With the Shadow DOM presents a refresher on CSS basics and an in-depth explanation of cascade, specificity, and inheritance in the Shadow DOM. These three chapters, deftly chosen by web programming expert Ben Farrell, explore the importance of user-friendly CSS layout before a deep-dive into the Shadow DOM with an emphasis on CSS encapsulation, rediscovering the ID attribute for web components, and how to use the new Shadow DOM CSS selectors.
Table of Contents detailed table of contents

Cascade, specificity, and inheritance

1.1 The cascade

1.1.1 Understanding stylesheet origin

1.1.2 Understanding specificity

1.1.3 Understanding source order

1.1.4 Two rules of thumb

1.2 Inheritance

1.3 Special values

1.3.1 Using the inherit keyword

1.3.2 Using the initial keyword

1.4 Shorthand properties

1.4.1 Beware shorthands silently overriding other styles

1.4.2 Understanding the order of shorthand values

Layout with CSS3

Layout with CSS3

Placing elements on a line with inline-block

Grouping element dimensions with display: table

CSS3 improvements to CSS2 approaches

Mixing different length units with calc

Controlling the box model

Using media queries for flexible layout

Resolution detection

Changing layout based on orientation and aspect ratio

Additional device-detection features

The future of CSS layout

Using flexible boxes for nested layout

Using the CSS3 Grid Alignment module

Controlling content flow with CSS3 Regions

Making complex shapes with CSS3 Exclusions and Shapes

Browser support

inline-block in IE6 and IE7

calc in Chrome and Firefox

box-sizing in Firefox and Safari 5

Flexboxes in Chrome, Firefox, IE, and Safari

Media queries and old browsers

Regions and exclusions


Shadow CSS

9.1 Style creep

9.1.1 Style creep into component descendants

9.1.2 Style creep into your component

9.2 Style creep solved with the Shadow DOM

9.2.1 When styles creep

9.3 Shadow DOM workout plan

9.3.1 Application shell

9.3.2 Host and ID selectors

9.3.3 Grid and list containers

9.4 Adaptable components

9.4.1 Creating the exercise component

9.4.2 Exercise component style

9.5 Updating the slider component


What's inside

  • “Cascade, Specificity, and Inheritance” from CSS in Depth by Keith J. Grant
  • “Layout with CSS3” from Hello HTML5 & CSS3 by Rob Crowther
  • “Shadow CSS” from Web Components in Action by Ben Farrell

About the author

Ben Farrell is a Senior Experience Developer at Adobe working on the Adobe Design Prototyping Team. Ben, alongside his team, helps shape and realize the UX of products and features in the middle ground between design and engineering. Ben has been primarily web focused his entire career, but has worked on award winning projects using a wide variety of platforms and languages.

placing your order...

Don't refresh or navigate away from the page.
eBook $0.00 PDF only
Back to Simple CSS (eBook) added to cart
continue shopping
go to cart

Prices displayed in rupees will be charged in USD when you check out.

FREE domestic shipping on three or more pBooks