CSS: The Definitive Guide: Web Layout and Presentation 5th Edition [5 ed.] 9781098117610
If you're a web designer or app developer interested in sophisticated page styling, improved accessibility, and les
249 94 47MB
English Pages 1126 Year 2023
![CSS: The Definitive Guide: Web Layout and Presentation 5th Edition [5 ed.]
9781098117610](https://dokumen.pub/img/200x200/css-the-definitive-guide-web-layout-and-presentation-5th-edition-5nbsped-9781098117610.jpg)
- Author / Uploaded
- Eric A. Meyer
- Estelle Weyl
- Categories
- Computers
- Programming: Programming Languages
Table of contents :
Preface
Conventions Used in This Book
Value Syntax Conventions
Using Code Examples
O’Reilly Online Learning
How to Contact Us
Acknowledgments
Eric Meyer
Estelle Weyl
1. CSS Fundamentals
A Brief History of (Web) Style
Stylesheet Contents
Rule Structure
Vendor Prefixing
Whitespace Handling
CSS Comments
Markup
Elements
Replaced and Nonreplaced Elements
Replaced elements
Nonreplaced elements
Element Display Roles
Block-level elements
Inline-level elements
Bringing CSS and HTML Together
The Tag
Attributes
Alternate stylesheets
The Element
The @import Directive
HTTP Linking
Inline Styles
Summary
2. Selectors
Basic Style Rules
Type Selectors
Grouping
Grouping Selectors
The universal selector
Grouping Declarations
Grouping Everything
Class and ID Selectors
Class Selectors
Multiple Classes
ID Selectors
Deciding Between Class and ID
Attribute Selectors
Simple Attribute Selectors
Selection Based on Exact Attribute Value
Selection Based on Partial Attribute Values
Matching one word in a space-separated list
Matching a substring within an attribute value
Matching a substring at the beginning of an attribute value
Matching a substring at the end of an attribute value
The Case-Insensitivity Identifier
Using Document Structure
Understanding the Parent-Child Relationship
Defining Descendant Selectors
Selecting Children
Selecting Adjacent-Sibling Elements
Selecting Following Siblings
Summary
3. Pseudo-Class and -Element Selectors
Pseudo-Class Selectors
Combining Pseudo-Classes
Structural Pseudo-Classes
Selecting the root element
Selecting empty elements
Selecting only children
Using only-of-type selection
Selecting first children
Selecting last children
Selecting the first and last of a type
Selecting every nth child
Selecting every nth of a type
Location Pseudo-Classes
Hyperlink-specific pseudo-classes
Nonhyperlink location pseudo-classes
User Action Pseudo-Classes
The :focus-visible pseudo-class
The :focus-within pseudo-class
Real-world issues with dynamic styling
UI-State Pseudo-Classes
Enabled and disabled UI elements
Check states
Default-value pseudo-classes
Optionality pseudo-classes
Validity pseudo-classes
Range pseudo-classes
Mutability pseudo-classes
The :lang() and :dir() Pseudo-Classes
Logical Pseudo-Classes
The negation pseudo-class
The :is() and :where() pseudo-classes
Selecting defined elements
The :has() Pseudo-Class
Other Pseudo-Classes
Pseudo-Element Selectors
Styling the First Letter
Styling the First Line
Restrictions on ::first-letter and ::first-line
The Placeholder Text Pseudo-Element
The Form Button Pseudo-Element
Generating Content Before and After Elements
Highlight Pseudo-Elements
The Backdrop Pseudo-Element
The Video-Cue Pseudo-Element
Shadow Pseudo-Classes and -Elements
Shadow Pseudo-Classes
Shadow Pseudo-Elements
Summary
4. Specificity, Inheritance, and the Cascade
Specificity
Declarations and Specificity
Resolving Multiple Matches
Zeroed Selector Specificity
ID and Attribute Selector Specificity
Importance
Inheritance
The Cascade
Sorting by Importance and Origin
Sorting by Element Attachment
Sorting by Cascade Layer
Sorting by Specificity
Sorting by Order
Working with Non-CSS Presentational Hints
Summary
5. Values and Units
Keywords, Strings, and Other Text Values
Keywords
Global keywords
inherit
initial
unset
revert
revert-layer
The all Property
Strings
Identifiers
URLs
Images
Numbers and Percentages
Integers
Numbers
Percentages
Fractions
Distances
Absolute Length Units
Pixel lengths
Pixel theory
Resolution Units
Relative Length Units
The em unit
The ex unit
The ch unit
Other relative length units
Root-Relative Length Units
The rem unit
Other root-relative units
Viewport-Relative Units
Function Values
Calculation Values
Maximum Values
Minimum Values
Clamping Values
Attribute Values
Color
Named Colors
Color Keywords
Colors by RGB and RGBa
Functional RGB colors
RGBa colors
Hexadecimal RGB colors
Hexadecimal RGBa colors
HSL and HSLa Colors
Colors with HWB
Lab Colors
LCH Colors
Oklab and Oklch
Using color()
Applying Color
Affecting Form Elements
Inheriting Color
Angles
Time and Frequency
Ratios
Position
Custom Properties
Custom Property Fallbacks
Summary
6. Basic Visual Formatting
Basic Boxes
A Quick Primer
The Containing Block
Altering Element Display
Changing Roles
Handling Block Boxes
Logical Element Sizing
Content-Based Sizing Values
Minimum and Maximum Logical Sizing
Height and Width
Altering Box Sizing
Block-Axis Properties
Auto Block Sizing
Percentage Heights
Handling Content Overflow
Single-axis overflow
Negative Margins and Collapsing
Collapsing Block-Axis Margins
Inline-Axis Formatting
Inline-Axis Properties
Using auto
Only one auto
More than one auto
Too many autos
Negative Margins
Percentages
Replaced Elements
List Items
Box Sizing with Aspect Ratios
Inline Formatting
Line Layout
Basic Terms and Concepts
Line Heights
Inline Nonreplaced Elements
Building the Boxes
Setting Vertical Alignment
Managing the Line Height
Understanding baselines and line heights
Scaling line heights
Adding Box Properties to Nonreplaced Elements
Changing Breaking Behavior
Glyphs Versus Content Area
Inline Replaced Elements
Adding Box Properties to Replaced Elements
Replaced Elements and the Baseline
Inline-Block Elements
Flow Display
Content Display
Other Display Values
Element Visibility
Animating Visibility
Summary
7. Padding, Borders, Outlines, and Margins
Basic Element Boxes
Padding
Replicating Values
Single-Side Padding
Logical Padding
Percentage Values and Padding
Padding and Inline Elements
Padding and Replaced Elements
Borders
Borders with Style
Multiple styles
Single-side styles
Logical styles
Border Widths
Logical border widths
No border at all
Border Colors
Logical border colors
Transparent borders
Single-Side Shorthand Border Properties
Global Borders
Borders and Inline Elements
Rounding Border Corners
Rounded corner clamping
More complex corner shaping
Corner blending
Individual rounding properties
Image Borders
Loading and slicing a border image
Altering the image widths
Creating a border overhang
Altering the repeat pattern
Shorthand border image
Some examples
Outlines
Outline Styles
Outline Width
Outline Color
The only outline shorthand
How They Are Different
Margins
Length Values and Margins
Percentages and Margins
Single-Side Margin Properties
Margin Collapsing
Negative Margins
Margins and Inline Elements
Summary
8. Backgrounds
Setting Background Colors
Explicitly Setting a Transparent Background
Background and Color Combinations
Clipping the Background
Working with Background Images
Using an Image
Understanding Why Backgrounds Aren’t Inherited
Following Good Background Practices
Positioning Background Images
Keywords
Percentage values
Length values
Negative values
Changing the offset edges
Changing the positioning box
Background Repeating (or Lack Thereof)
Positioning images that repeat
Spacing and rounding repeat patterns
Tiling and clipping repeated backgrounds
Getting Attached
Useful side effects of attached backgrounds
Sizing Background Images
Maintaining the background image’s aspect ratio
Covering and containing
Bringing It All Together
Working with Multiple Backgrounds
Using the Background Shorthand
Creating Box Shadows
Summary
9. Gradients
Linear Gradients
Setting Gradient Colors
Positioning Color Stops
Setting Color Hints
Understanding Gradient Lines: The Gory Details
Repeating Linear Gradients
Radial Gradients
Setting Shape and Size
Positioning Radial Gradients
Using Radial Color Stops and the Gradient Ray
Handling Degenerate Cases
Repeating Radial Gradients
Conic Gradients
Creating Conic Color Stops
Repeating Conic Gradients
Manipulating Gradient Images
Creating Special Effects
Triggering Average Gradient Colors
Summary
10. Floating and Positioning
Floating
Floated Elements
No floating at all
Floating: The Details
Applied Behavior
Negative margins
Floats, Content, and Overlapping
Clearing
Positioning
Types of Positioning
The Containing Block
Offset Properties
Inset Shorthands
Setting Width and Height
Limiting Width and Height
Absolute Positioning
Containing Blocks and Absolutely Positioned Elements
Placement and Sizing of Absolutely Positioned Elements
Auto-edges
Placing and Sizing Nonreplaced Elements
Placing and Sizing Replaced Elements
Placement on the Z-Axis
Fixed Positioning
Relative Positioning
Sticky Positioning
Summary
11. Flexible Box Layout
Flexbox Fundamentals
A Simple Example
Flex Containers
Using the flex-direction Property
Working with Other Writing Directions
Wrapping Flex Lines
Defining Flexible Flows
Understanding Axes
Arrangement of Flex Items
Flex Item Alignment
Justifying Content
Justifying and overflow
justify-content example
Aligning Items
Flex item margins and alignment
Baseline alignment
Safe and unsafe alignment
The align-self property
Aligning Flex Lines
Using the place-content Property
Opening Gaps Between Flex Items
Flex Items
What Are Flex Items?
Flex Item Features
Absolute Positioning
Minimum Widths
Flex-Item-Specific Properties
The flex Property
The flex-grow Property
Growth Factors and the flex Property
The flex-shrink Property
Proportional shrinkage based on width and shrink factor
Differing basis values
Responsive flexing
The flex-basis Property
The content keywords
Automatic flex basis
Default values
Length units
Percentage units
Zero basis
The flex Shorthand
Flexing with initial
Flexing with auto
Preventing flexing with none
Numeric flexing
The order Property
Tabbed Navigation Revisited
Summary
12. Grid Layout
Creating a Grid Container
Understanding Basic Grid Terminology
Creating Grid Lines
Using Fixed-Width Grid Tracks
Using Flexible Grid Tracks
Fractional units
Content-aware tracks
Fitting Track Contents
Repeating Grid Tracks
Autofilling tracks
Defining Grid Areas
Placing Elements in the Grid
Using Column and Row Lines
Using Row and Column Shorthands
Working with Implicit Grid
Handling Errors
Using Areas
Understanding Grid-Item Overlap
Specifying Grid Flow
Defining Automatic Grid Tracks
Using the grid Shorthand
Using Subgrids
Defining Explicit Tracks
Dealing with Offsets
Naming Subgridded Lines
Giving Subgrids Their Own Gaps
Grid Items and the Box Model
Setting Alignment in Grids
Aligning and Justifying Individual Items
Aligning and Justifying All Items
Distributing Grid Items and Tracks
Layering and Ordering
Summary
13. Table Layout in CSS
Table Formatting
Visually Arranging a Table
Table Arrangement Rules
Setting Table Display Values
Row primacy
Columns
Inserting Anonymous Table Objects
Working with Table Layers
Using Captions
Table Cell Borders
Separated Cell Borders
Applying border spacing
Handling empty cells
Collapsed Cell Borders
Collapsing border layout
Border collapsing
Table Sizing
Width
Fixed layout
Automatic layout
Height
Alignment
Summary
14. Fonts
Font Families
Using Generic Font Families
Using Quotation Marks
Using Custom Fonts
Using Font-Face Descriptors
Restricting Character Range
Working with Font Display
Combining Descriptors
Font Weights
How Weights Work
The font-weight Descriptor
Font Size
Using Absolute Sizes
Using Relative Sizes
Setting Sizes as Percentages
Automatically Adjusting Size
Font Style
The font-style Descriptor
Font Stretching
The font-stretch Descriptor
Font Synthesis
Font Variants
Capital Font Variants
Numeric Font Variants
Ligature Variants
Alternate Variants
East Asian Font Variants
Font Variant Position
Font Feature Settings
The font-feature-settings Descriptor
Font Variation Settings
Font Optical Sizing
Override Descriptors
Font Kerning
The font Property
Understanding font Property Limitations
Adding the Line Height
Using the Shorthand Properly
Using System Fonts
Font Matching
Summary
15. Text Properties
Indentation and Inline Alignment
Indenting Text
Aligning Text
Start and end alignment
Justified text
Parent matching
Aligning the Last Line
Word Spacing
Letter Spacing
Spacing and Alignment
Vertical Alignment
Adjusting the Height of Lines
Constructing a line
Assigning values to line-height
Understanding line-height and inheritance
Vertically Aligning Text
Baseline alignment
Superscripting and subscripting
Top and bottom alignment
Middle alignment
Percentages
Length alignment
Text Transformation
Text Decoration
Setting Text Decoration Line Placement
Setting Text Decoration Color
Setting Text Decoration Thickness
Setting Text Decoration Style
Using the Text Decoration Shorthand Property
Offsetting Underlines
Skipping Ink
Understanding Weird Decorations
Text Rendering
Text Shadows
Text Emphasis
Setting Emphasis Style
Changing Emphasis Color
Placing Emphasis Marks
Using the text-emphasis Shorthand
Setting Text Drawing Order
Whitespace
Setting Tab Sizes
Wrapping and Hyphenation
Hyphenation
Word Breaking
Line Breaking
Wrapping Text
Writing Modes
Setting Writing Modes
Changing Text Orientation
Combining Characters
Declaring Direction
Summary
16. Lists and Generated Content
Working with Lists
Types of Lists
String markers
List-Item Images
List-Marker Positions
List Styles in Shorthand
List Layout
The ::marker Pseudo-Element
Creating Generated Content
Inserting Generated Content
Specifying Content
Inserting attribute values
Using generated quotes
Defining Counters
Resetting and incrementing
Displaying counters
Counters and scope
Defining Counting Patterns
Fixed Counting Patterns
Cyclic Counting Patterns
Symbolic Counting Patterns
Alphabetic Counting Patterns
Numeric Counting Patterns
Additive Counting Patterns
Extending Counting Patterns
Speaking Counting Patterns
Summary
17. Transforms
Coordinate Systems
Transforming
The Transform Functions
Translation
The translate property
Scaling
The scale property
Element Rotation
The rotate property
Individual Transform Property Order
Skewing
Matrix Functions
A note on end-state equivalence
Setting Element Perspective
More Transform Properties
Moving the Transform’s Origin
Choosing the Transform’s Box
Choosing a 3D Style
Changing Perspective
Defining a group perspective
Moving the perspective’s origin
Dealing with Backfaces
Summary
18. Transitions
CSS Transitions
Transition Properties
Limiting Transition Effects by Property
Suppressing transitions via property limits
Transition events
Setting Transition Duration
Altering the Internal Timing of Transitions
Cubic Bézier timing
Step timing
Delaying Transitions
Negative delay values
Using the transition Shorthand
Reversing Interrupted Transitions
Animatable Properties and Values
How Property Values Are Interpolated
Interpolating Repeating Values
Printing Transitions
Summary
19. Animation
Accommodating Seizure and Vestibular Disorders
Defining Keyframes
Setting Up Keyframe Animations
Defining Keyframe Selectors
Omitting from and to Values
Repeating Keyframe Properties
Animatable Properties
Using Nonanimatable Properties That Aren’t Ignored
Scripting @keyframes Animations
Animating Elements
Invoking a Named Animation
Defining Animation Lengths
Declaring Animation Iterations
Setting an Animation Direction
Delaying Animations
Exploring Animation Events
Animation chaining
Animation iteration delay
Changing the Internal Timing of Animations
Using step timing functions
Animating the timing function
Setting the Animation Play State
Animation Fill Modes
Bringing It All Together
Animation, Specificity, and Precedence Order
Specificity and !important
Animation Iteration and display: none;
Animation and the UI Thread
Using the will-change Property
Printing Animations
Summary
20. Filters, Blending, Clipping, and Masking
CSS Filters
Basic Filters
Color Filtering
Brightness, Contrast, and Saturation
SVG Filters
Compositing and Blending
Blending Elements
Darken, lighten, difference, and exclusion
Multiply, screen, and overlay
Hard and soft light
Color dodge and burn
Hue, saturation, luminosity, and color
Blending Backgrounds
Blending in Isolation
Containing Elements
Float Shapes
Shaping with Image Transparency
Using Inset Shapes
Circles and ellipses
Polygons
Adding a Shape Margin
Clipping and Masking
Clipping
Clip Shapes
Clip Boxes
Clipping with SVG Paths
Masks
Defining a Mask
Changing the Mask’s Mode
Sizing and Repeating Masks
Positioning Masks
Clipping and Compositing Masks
Bringing It All Together
Setting Mask Types
Border-Image Masking
Object Fitting and Positioning
Summary
21. CSS At-Rules
Media Queries
Basic Media Queries
Complex Media Queries
Special Value Types
Keyword Media Features
Forced Colors, Contrast, and Display Mode
Ranged Media Features
Deprecated Media Features
Responsive Styling
Paged Media
Print Styles
Differences Between Screen and Print
Page Size
Page Margins and Padding
Named Page Types
Page Breaking
Orphans and Widows
Page-Breaking Behavior
Repeated Elements
Elements Outside the Page
Container Queries
Defining Container Types
Defining Container Names
Using Container Shorthand
Using Container At-Rules
Defining Container Query Features
Setting Container Length Units
Feature Queries (@supports)
Other At-Rules
Defining a Character Set for a Stylesheet
Defining a Namespace for Selectors
Summary
A. Additional Resources
Index
![CSS: The Definitive Guide: Web Layout and Presentation [5 ed.]
1098117611, 9781098117610](https://dokumen.pub/img/200x200/css-the-definitive-guide-web-layout-and-presentation-5nbsped-1098117611-9781098117610-k-3481387.jpg)
![CSS: The Definitive Guide: Web Layout and Presentation [5 ed.]
1098117611, 9781098117610](https://dokumen.pub/img/200x200/css-the-definitive-guide-web-layout-and-presentation-5nbsped-1098117611-9781098117610-t-7668400.jpg)
![CSS: The Definitive Guide: Web Layout and Presentation [5 ed.]
1098117611, 9781098117610](https://dokumen.pub/img/200x200/css-the-definitive-guide-web-layout-and-presentation-5nbsped-1098117611-9781098117610.jpg)
![CSS: The Definitive Guide: visual presentation for the web [fourth edition]
9781449393199, 1449393195](https://dokumen.pub/img/200x200/css-the-definitive-guide-visual-presentation-for-the-web-fourth-edition-9781449393199-1449393195.jpg)
![Every layout relearn CSS layout by example [2 ed.]](https://dokumen.pub/img/200x200/every-layout-relearn-css-layout-by-example-2nbsped.jpg)
![Web design: introductory [5th Edition]
9781285170626, 1285170628](https://dokumen.pub/img/200x200/web-design-introductory-5th-edition-9781285170626-1285170628.jpg)