[frontendmasters.com] CSS In-Depth, v2 [2018, ENG]

Table of Contents
Introduction
Introduction
00:00:00 - 00:02:52
Introduction
Estelle introduces herself, her book "CSS: The Definitive Guide" co-authored with Eric Meyer, and demos a snowman. using many CSS features.
CSS Introduction
00:02:53 - 00:08:20
CSS Introduction
Estelle introduces Cascading Stylesheets, its role in web development and how to include CSS files.
CSS Setup
00:08:21 - 00:14:32
CSS Setup
Estelle shows a short demo on selectors and discusses the pros and cons of vendor prefixes. Afterward, Estelle reviews tools to edit, debug and share CSS.
Selectors
Basic Selectors & CSS Levels
00:14:33 - 00:21:03
Basic Selectors & CSS Levels
Basic selectors include class, id and element selectors. She also introduces the CSS selectors available in level 1, 2, 3 & 4 of the CSS specification.
Specificity Introduction
00:21:04 - 00:23:34
Specificity Introduction
Estelle introduces the concept of CSS specificity and how the final style gets applied based on its selector weight.
Relational Selectors & Combinators
00:23:35 - 00:28:52
Relational Selectors & Combinators
Estelle reviews a demo of the selectors based on parent and descendant relationships. After introducing combinators. Estelle covers how to use the selectors API.
Attribute Selectors
00:28:53 - 00:39:36
Attribute Selectors
Select elements using the attributes from your HTML markup, including partial value matches, similar to regular expressions
Attribute Selectors Recap
00:39:37 - 00:43:58
Attribute Selectors Recap
Estelle recaps and demos the various attribute selectors.
User Interface Selectors
00:43:59 - 00:53:16
User Interface Selectors
Several UI selectors can target elements based on their current state, such as whether a checkbox is checked, or a form input is valid or invalid.
Structural Selectors
00:53:17 - 01:03:01
Structural Selectors
Structural Selectors target elements based on relationship to other DOM nodes. We take a deeper dive into understanding first-child, last-child, only-child, and only-of-type.
nth-of-type Structural Selectors
01:03:02 - 01:09:49
nth-of-type Structural Selectors
Estelle shows hot to select elements based on where they are about their siblings, such as targeting every third element starting with the ninth element from the end.
Structural Selectors Demo
01:09:50 - 01:14:10
Structural Selectors Demo
Estelle shows a complex example of creating a U.S. flag with structural selectors
Root, Empty & Blank
01:14:11 - 01:17:27
Root, Empty & Blank
Select the root element of the page with :root. What is an empty element? Select them with :empty.
Negation, Matching & Parent
01:17:28 - 01:31:23
Negation, Matching & Parent
Exclude elements from being matched with :not. Choose from multiple different elements with :matches and :any.
Linguistic Pseudo Classes
01:31:24 - 01:34:48
Linguistic Pseudo Classes
Estelle illustrates how to select elements based on the language declaration of that element, an element's ancestor, or the document language.
Link, Locations & User Action
01:34:49 - 01:45:01
Link, Locations & User Action
Estelle demonstrates how to style links and other elements based on states like active, focus, visited, or whether they are the current target of the document. Then Estelle shows a demonstration created with :target and :checked, without JavaScript, and a tabbed navigation updated with the target selector.
Specificity
01:45:02 - 01:58:40
Specificity
An in-depth look at CSS specificity and the cascade using "SpeciFISHity" illustrations showing the weight of IDs, classes, element and pseudo selectors as well as !important using plankton, fish, and sharks.
Pseudo-Elements
Introduction to Pseudo-Elements
01:58:41 - 02:01:54
Introduction to Pseudo-Elements
Estelle introduces an example of pseudo elements using first-letter and selection pseudo selectors.
Before, After and Generated Content
02:01:55 - 02:05:19
Before, After and Generated Content
A quick look at generating content with ::before and ::after
Selection & More Pseudo Elements
02:05:20 - 02:11:10
Selection & More Pseudo Elements
After showing how to style selected text, and not allowing text to be selected on touch devices, Estelle provides a quick overview on how to discover different browser-specific shadow pseudo elements.
Generated Content
Before and After
02:11:11 - 02:14:09
Before and After
Estelle generates content on the page using the ::before and ::after pseudo selectors.
Counters
02:14:10 - 02:19:51
Counters
Understanding how CSS Counters work: a counter you can display a number based on a condition in CSS.
Quotes & Attributes
02:19:52 - 02:26:11
Quotes & Attributes
A look at various values of the content property, including quotes and no-quotes
Counters Review
02:26:12 - 02:30:32
Counters Review
Understanding how CSS Counters work: a counter you can display a number based on a condition in CSS.
Images
02:30:33 - 02:34:43
Images
how to include images in generated content, but mostly how the value of the content property is not interpolated
Strings & Special Characters
02:34:44 - 02:41:49
Strings & Special Characters
Estelle reviews what makes for a valid string in the the content attribute.
Icon Accessibility
02:41:50 - 02:50:07
Icon Accessibility
A look at UTF-8 characters and material design icons with a focus on accessibility of generated content.
Design Elements
02:50:08 - 02:54:06
Design Elements
Estelle looks at different design features people have created with generated content.
Media Queries
Media Type, Screen Size, Resolution
02:54:07 - 03:07:20
Media Type, Screen Size, Resolution
Estelle provides an overview of the history of media queries along with an explanation of how, with the proliferation of various device, you have to think about screen resolutions, orientation, and sizes. An explanation of what media queries are and how to determine the breakpoints.
Syntax & Punctuation
03:07:21 - 03:09:56
Syntax & Punctuation
The syntax and punctuation of media queries
Browser Capability @supports
03:09:57 - 03:15:28
Browser Capability @supports
Using @supports to determine what features a browser supports, and targeting CSS based on what a browser can handle.
Viewport
03:15:29 - 03:21:36
Viewport
Why it's vital to set the viewport meta tag, why developers should never disable zoom, and all the current and future viewport values.
Use Cases: Hyphenations
03:21:37 - 03:23:39
Use Cases: Hyphenations
Overview of CSS Hyphenation, HTML's ­ character and the <wbr> element.
Use Cases: Columns
03:23:40 - 03:26:57
Use Cases: Columns
Estelle introduces to CSS Multi-Column layout. Column count, column size, and how column counts change without needing media queries.
Use Cases: SVG
03:26:58 - 03:30:48
Use Cases: SVG
Estelle discusses the viewport. The viewport is the size of the device or the browser window, unlike in SVG, which refers to the size of the SVG container itself.
Colors & Appearance
Colors: RGB, HSL & HEX
03:30:49 - 03:44:21
Colors: RGB, HSL & HEX
Estelle looks at all the different ways of declaring colors in CSS, including currentColor and 8-digit hexadecimal alpha transparent color notation.
Opacity vs. Alpha Transparency
03:44:22 - 03:46:56
Opacity vs. Alpha Transparency
Estelle differentiates between opacity and alpha transparency, why it matters, and provides tips to make the right choice.
Appearance
03:46:57 - 03:52:13
Appearance
Estelle shows that buttons, scrollbars, audio control are stylable elements. Then Estelle looks at how the browser defines appearance, and how to discover how to control it.
Flexbox
Goal of Flexbox and Demos
03:52:14 - 03:57:41
Goal of Flexbox and Demos
Previously difficult problems like lining up column heights or changing the structural position of elements become easy with Flexbox.
Browser Support and Overview
03:57:42 - 04:03:18
Browser Support and Overview
Flexbox is widely supported across browsers. Estelle demonstrates the power of Flexbox while giving an overview of the Flexbox properties and the simplification of layout when using flexbox instead of floats.
Setup Flex Container and Items
04:03:19 - 04:11:54
Setup Flex Container and Items
Estelle shows how to set up the Flexbox container and basic Flexbox Item properties.
Understanding Flexbox
04:11:55 - 04:21:55
Understanding Flexbox
Estelle reviews that the essentials of flexible boxes are creating a flex container, defining the flex-direction, and wrapping of flex lines. Estelle also covers the concepts of the main and cross axes, to ensure developers fully understand the power of flexbox.
Flex Container Properties
04:21:56 - 04:34:18
Flex Container Properties
Deep dive into flex container properties of justify-content, align-items and align-content, by which you can align flex items along their flex lines, and flex lines within their flex container.
Flex Item Properties
04:34:19 - 04:43:45
Flex Item Properties
The look and feel of flex items can be set with flex container properties, but there are flex item properties to alter the look and order of individual flex items.
Flexibility & Shorthand
04:43:46 - 04:55:47
Flexibility & Shorthand
A key to flexible layout is the flexibility of individual flex items. In this section, Estelle explains flex-grow, flex-shrink, and flex-basis. The growth factor determines whether items can grow, and defines how much they can grow proportionally to other growable items. Similarly, flex shrink factor sets how much items can shrink if there isn't enough space for them to fit without wrapping. Flex basis defines the basis of each flex item before growth or shrinking occurs, thereby defining whether there is room for flex items to grow, or whether shrinkable flex items need to shrink.
Tables
Overview & Semantics
04:55:48 - 04:59:43
Overview & Semantics
While not appropriate, or needed, for layout, tables are still important, but only for presenting data. Estelle gives an overview of the semantic elements that make up tables, including caption, colgroup, col, thead, tbody, tfoot, tr and td.
Caption
04:59:44 - 05:03:02
Caption
The function, placement and styling of table captions.
Table Borders & Spacing
05:03:03 - 05:07:23
Table Borders & Spacing
The CSS properties are impacting the borders, padding, and spacing within and between table cells. Cell spacing can be collapsed to style the rows of tables.
Other Table Properties
05:07:24 - 05:11:23
Other Table Properties
CSS provides the ability to style or even hide empty cells separately. Vertical alignment within cells and rows, including at baseline, is covered.
Styling a Table
05:11:24 - 05:20:45
Styling a Table
Estelle live codes styling a table and invites you to try it out on your own.
Grid
Flexbox vs. Grids
05:20:46 - 05:24:53
Flexbox vs. Grids
Estelle discusses the role of Flexbox vs. grid and where to use each.
Grid Basics
05:24:54 - 05:29:14
Grid Basics
Estelle reviews basic grid terminology: lines, cell, area, track, row, column, and gutter.
Display Property
05:29:15 - 05:32:41
Display Property
Estelle demos using display: grid with grid-template-columns, repeat notation, and fraction units.
Columns & Rows
05:32:42 - 05:37:56
Columns & Rows
Estelle shows how to mix units of measure when defining grid columns and rows.
Fraction Unit & Repeat Notation
05:37:57 - 05:45:38
Fraction Unit & Repeat Notation
Estelle demos using repeat() notation and fr units, as well as covers the ability to use minimums and maximums.
Adding Gutters & Exercise
05:45:39 - 05:49:24
Adding Gutters & Exercise
An overview of the grid-gap() property
Exercise Walkthrough
05:49:25 - 05:52:13
Exercise Walkthrough
Estelle walks through her code she created during the exercise break.
Positioning Grid Items
05:52:14 - 05:55:45
Positioning Grid Items
You can position a grid item anywhere in the grid by listing the start and end gridlines
Grid Column & Row Naming
05:55:46 - 06:01:30
Grid Column & Row Naming
Estelle show how to name grid rows and columns to reference and reuse them to easily place an item in the grid.
Item Properties & Holy Grail Layout
06:01:31 - 06:07:20
Item Properties & Holy Grail Layout
Estelle walks through item properties and shows the "Holy Grail" layout which most web pages use to lay out the header, sidebar, content, and footer.
Coding the Holy Grail Layout
06:07:21 - 06:16:23
Coding the Holy Grail Layout
Live code walkthrough of coding the Holy Grail Layout with CSS Grid.
Named Template Areas
06:16:24 - 06:22:27
Named Template Areas
Estelle shows how to name column and row areas to lay out your grid based on template names.
Align and Justify Items
06:22:28 - 06:28:51
Align and Justify Items
Estelle demonstrates how individual items can be justified and aligned based on the grid line, row track and can stretch or shrink to the content inside.
Align and Justify Content
06:28:52 - 06:34:52
Align and Justify Content
Estelle uses align-content and justify-content to set the position of the grid, grid columns, and grid rows. You are also able to add a grid-gap.
Track Sizing & Auto Flow
06:34:53 - 06:38:42
Track Sizing & Auto Flow
Estelle illustrates how to use automatic flow to dynamically assign default sizing to rows and columns that are added not as part of grid-template-row and columns.
More Grid Resources
06:38:43 - 06:41:13
More Grid Resources
Estelle shows some of her favorite CSS Grid resources and shows a few more demo websites.
Grid Dev Tools
06:41:14 - 06:42:49
Grid Dev Tools
Demo of the CSS Grid Dev Tools built into Firefox.
Backgrounds & Borders
Background Properties & Color
06:42:50 - 06:45:28
Background Properties & Color
Overview of the background properties and acceptable values for background color.
Background Image
06:45:29 - 06:52:25
Background Image
Background images can be jpg, gifs or even SVGs or data blobs. You can also add multiple background images.
Background Image Future
06:52:26 - 06:56:42
Background Image Future
Estelle discusses how future background support will support crossfade, image sets, media fragments, canvas and more.
Repeat, Attachment & Position
06:56:43 - 07:05:13
Repeat, Attachment & Position
Repeat background, attach a background even with scroll and set the position of the background.
Clip, Origin & Size
07:05:14 - 07:11:59
Clip, Origin & Size
After showing how to clip the background color to the border, padding or content and set the origin of the background image, Estelle resizes the background image to a specific size or use cover or contain.
Shorthand & Demo
07:12:00 - 07:18:31
Shorthand & Demo
Estelle demonstrates how to set all the properties in order with the background shorthand, but suggests not to use it unless you fully understand the syntax and want to override all the properties. Then Estelle plays around with various properties to make a shark background change.
Border Color, Style & Width
07:18:32 - 07:21:34
Border Color, Style & Width
After showing how to set the border's color, style, and width, Estelle shows how to set all of these properties with shorthand.
Border Radius & Border Image
07:21:35 - 07:37:16
Border Radius & Border Image
Estelle illustrates how to set the border-radius for rounded corners and even more styles as well as images as the border of elements and image details.
Gradients
Gradient Demos & Overview
07:37:17 - 07:41:57
Gradient Demos & Overview
Estelle demonstrates different gradient combinations as a way of overview of the types of gradients. She then looks at conical gradients, which will be available in the future.
Linear & Radial Gradient Syntax
07:41:58 - 07:44:55
Linear & Radial Gradient Syntax
Linear and radial gradients go from one color to another. The default direction is "to bottom" which is from top to bottom.
Color Stops
07:44:56 - 07:55:15
Color Stops
Color stops allow you to transition between more than one color in between the start and end positions.
Color Hints
07:55:16 - 08:01:35
Color Hints
Color hints allow you to specify the mid-point between two color stops.
Gradient Directions
08:01:36 - 08:08:13
Gradient Directions
Make gradients render in any direction using "to" top, left, bottom or right. You can also use degrees to set the specific angle for a gradient direction, and a quick note on animation.
Stripes with Repeat Linear Gradient
08:08:14 - 08:14:43
Stripes with Repeat Linear Gradient
Render stripes using gradients with repeating-linear-gradient.
Radial Gradients & Position
08:14:44 - 08:21:28
Radial Gradients & Position
Radial gradients start from a center point and move outwards. You can position the center of the gradient.
Shape, Size & Sizing KeyTerms
08:21:29 - 08:32:23
Shape, Size & Sizing KeyTerms
Radial gradients can be a circle or ellipse. The ellipse can be resized to be more tall or wide.
Color Stops, Hints & Repeating
08:32:24 - 08:35:35
Color Stops, Hints & Repeating
You can set color stops and color hints on radial gradients too.
Transforms
Transform Overview
08:35:36 - 08:38:23
Transform Overview
Estelle demos using transforms to translate, rotate and skew elements.
2D Transform Functions
08:38:24 - 08:47:34
2D Transform Functions
Overview of the functions available to transform: translate, scale, rotate, skew and matrix.
Function & Transform Order
08:47:35 - 08:53:06
Function & Transform Order
Transforms can be combined using multiple functions. Transform functions are implemented in the order declared, and can be impacted by the transform-origin property.
3D Transform Functions & Properties
08:53:07 - 08:55:20
3D Transform Functions & Properties
Transforming in 3D adds a few more functions including scale3d, rotate3d, matrix3d & perspective.
Perspective & Perspective Origin
08:55:21 - 09:01:13
Perspective & Perspective Origin
Perspective effects how close you are looking at the object when you translate it into 3D space. A smaller value appears closer to the object and has a greater impact.
Backface Visibility & Box
09:01:14 - 09:06:39
Backface Visibility & Box
Estelle shows how to hide the back of a 3D translated element. The box will be added in the future.
Transitions
Overview & Transition Properties
09:06:40 - 09:11:13
Overview & Transition Properties
Transitions can change styles over time. A link hover style is a transition that happens over 0 milliseconds. You can specify a time, easing function, which properties you will transition, and whether you should wait before starting a transition.
Animatable Properties
09:11:14 - 09:17:49
Animatable Properties
Not all style properties can be animated. In general, properties that are animatable have a midpoint: if you can determine what the midpoint is between to property values, then the change between those two values can be transitioned or animated.
Events & Transition Examples
09:17:50 - 09:24:44
Events & Transition Examples
All transitions have transitioned events in both directions of the transition, including the individual transitionable longhand properties of a shorthand property. Estelle walks through examples of using CSS transitions.
Animations
CSS Animations Features
09:24:45 - 09:26:37
CSS Animations Features
Many animations can be solved with a bit of CSS instead of large JavaScript frameworks.
@keyframes
09:26:38 - 09:34:44
@keyframes
Keyframe animations can be named and define the duration and properties animating to using percentage values. Estelle demos the ability to create animations that animate properties between keyframes.
Naming Animations & Specificity
09:34:45 - 09:37:59
Naming Animations & Specificity
Estelle shows how to name an animation and apply it to an element. Estelle also discusses the order of animations and specificity.
Timing Functions
09:38:00 - 09:42:45
Timing Functions
An overview of cubic beziers, the easing timing functions, which can be used to improve your animation, making them look more natural instead of robotic.
Steps
09:42:46 - 09:46:11
Steps
The steps timing functions allow you to animate between keyframes in a specified number of steps rather than easing between them. Steps are great for sprite character animations.
Iteration Count & Delays
09:46:12 - 09:49:06
Iteration Count & Delays
Iteration allows you to specify the number of times to perform an animation. Delay allows the animation to start later or part-way through the animation with negative values.
Direction, Shorthand & Fill Mode
09:49:07 - 09:55:07
Direction, Shorthand & Fill Mode
You can change the direction of the animation, and define what happens before an animation starts and after an animation has ceased. Estelle also shows the shorthand version of specifying CSS animations.
Stopping Animations & Events
09:55:08 - 09:58:32
Stopping Animations & Events
Use the animation play state to stop or pause the animation. DOM events are thrown on the elements that you can listen to and interact with the element using JavaScript.
Other Features
CSS Columns
09:58:33 - 10:03:17
CSS Columns
Columns allow the flow of text between multiple columns. Estelle covers properties including fill, gap, span, break, orphans, and widows.
Box Sizing
10:03:18 - 10:04:37
Box Sizing
Estelle reviews the old IE box model and the standard box model. The "box-sizing: border-box" property value converts elements in modern browsers to the old IE box model, including padding and width within the box size.
Shaders & Blend Modes
10:04:38 - 10:07:59
Shaders & Blend Modes
CSS Filters, which are also known as Shaders, allow using Photoshop-like effects on images with a single line of CSS, saving time and bytes. Other CSS effects include using blend modes to blend multiple background images.
CSS Shapes
10:08:00 - 10:11:08
CSS Shapes
Text and images don't have to be rectangular. You can reshape images and flow text around shapes and jagged edges using clip-path and shape-outside. Estelle uses an SVG to clip a shape out of an element.
Fonts, Icons & Subsetting
10:11:09 - 10:17:00
Fonts, Icons & Subsetting
Estelle shows how to make icons accessible with fallback text. Putting your font through Font Squirrel, Estelle demonstrates how to use the expert settings to subset the fonts.
CSS as the Solution
10:17:01 - 10:24:03
CSS as the Solution
People often default to using JavaScript libraries instead of using CSS as solutions to UX features. Estelle gives some examples of starting with CSS as a base instead to address designer requests, including include providing input masking and creating a carousel with a few lines of CSS and a few lines of JavaScript, instead of a full-fledged framework.
Cursors
10:24:04 - 10:24:57
Cursors
We only use two cursor values, but there are lots of cursors available to provide more context to the user.
Text Overflow, Word Wrap & Calc
10:24:58 - 10:26:46
Text Overflow, Word Wrap & Calc
Estelle shows how to wrap text or hide the overflow, which showing ellipses to indicate there's missing text. Then she reviews the ellipses and word-wrap properties and discusses using calc() in the value to compute property values on the fly.
rem & Viewport Width
10:26:47 - 10:28:48
rem & Viewport Width
Lengths and font sizes can be declared relative to the root em size or the width or height of the actual viewport with rem, vh, vw, vmin and vmax.
Pointer Events & Content Editable
10:28:49 - 10:31:14
Pointer Events & Content Editable
"Pointer-events: none" allows click through an element. Estelle uses contenteditable in all her slides to make the slides interactive. In fact, attendees have been updating CSS directly in the examples because the <style> blocks have been set to visible with contenteditable.
Sass
10:31:15 - 10:37:58
Sass
Estelle shares how she uses Sass to organize and modularize her CSS.