English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 1h 53m | 321 MB
JavaScript has full access to the markup of a web page (DOM) and the styles of a page (CSSOM). Using JavaScript to interact with and manipulate the DOM is common practice, but using JavaScript to interact with CSS is rarely explored past the shallow layers of manipulating classes and injecting inline styles. In this course, Morten Rand-Hendriksen takes a deep dive into the intersection of JavaScript and CSS to see what is possible. He explores basic manipulation of the CSSOM to change the live styles of a site, looks at the new opportunities afforded by custom properties, and explores concepts like style tokens. As Morten shows, using JavaScript to control CSS opens the door to more interactive designs and user experiences, and allows designers and developers to do things not possible with CSS alone.
Table of Contents
Introduction
1 New possibilities at the intersection of CSS and JavaScript
2 Exercise files
1. Accessing Style Sheets and Styles
3 Access all style sheets in a document
4 Find specific style sheet in a document
5 Disable a style sheet using JavaScript
6 Access rules from a style sheet
7 Insert and delete rules from a style sheet
8 Challenge Stylesheet switcher
9 Solution Stylesheet switcher
2. Working with Style Rules
10 Modify a stylesheet rule
11 Find what styles have computed for an element
12 Add new inline styles to an element
13 Access inline element styles
14 Treating styles as element attributes
3. Working with Properties
15 Access the declaration of a specific CSS rule
16 Get a specific property value
17 Set existing property value or create a new property
18 Remove a specific property from a rule
19 The CSS Typed Object Model
20 Create and access style rules with the styleMap property
21 Createaccess inline element styles with attributeStyleMap
22 Challenge Rotate the box
23 Solution Rotate the box
4. Working with Custom Properties
24 Access custom properties
25 Set custom property values
26 Understanding registered custom properties
27 Defining registered custom properties
28 Challenge Color selector
29 Solution Color selector
Conclusion
30 New APIs under development
Resolve the captcha to access the links!