Debugging CSS

Foreword
Table of Contents
Introduction and Overview
The History of Debugging CSS
Style Master
Firebug Browser Extension
What Has Changed Today?
What Does Debugging CSS Mean?
Why Debugging Should Be Taught
The Debugging Mindset
Identifying CSS Bugs
Explaining a Bug to Someone
Why Debugging Needs Time
An Issue Is Not Clear
The Symptoms Are Easier to Treat Than the Cause
Focusing on One Path to the Problem
Ignoring Side Effects
Write Code That Is Easy To Debug
Who Is This Book For?
Why I Wrote This Book?
An Overview of the Book Chapters
Introduction to CSS Bugs
What Is a Bug?
Browsers Are Different
How to Fix a CSS Bug
Check the CSS
Check Browser Support
Use the Browser’s Developer Tools
CSS Bug Types
Visual Design Bug Types
Technical Bug Types
Calling an Incorrect File Path
Misnaming a Property
Using an Invalid Value for a Property
Using a Property That Depends on Another
Overriding One Property With Another
Duplicating a Property
Incorrectly Typing a Class Name
Neglecting the Cascade
Forgetting to Bust the Cache
Neglecting Performance
Ignoring Specificity
The Debugging Process
Getting Browser Information From Non-Technical People
Debugging Techniques
Wrapping Up
Debugging Environments and Tools
Toggling a CSS Declaration
Using the Keyboard to Increment and Decrement Values
CSS Errors
DevTools Mobile Mode
Mobile Mode Doesn’t Show a Horizontal Scrollbar
Scroll Into View
Screenshotting Design Elements
Device Pixel Ratio
Switching the User Agent
Debugging Media Queries
Don’t Forget the Meta Viewport Tag
The Order of Media Queries Matters
What If a Media Query Doesn’t Work?
Avoid Double-Breakpoint Media Queries
List Media Queries
Vertical Media Queries Are Important
Don’t Depend on Browser Resizing Alone
Box Model
Everything in CSS Is a Box
Computed CSS Values
Grayed-Out Properties
Firefox’s Style Editor
CSS Properties That Don’t Have an Effect
Compatibility Support in Firefox
Getting the Computed Value While Resizing the Browser
Getting the Computed Value With JavaScript
Reordering HTML Elements
Editing Elements in the DevTools
CSS Classes
Utility-Based CSS Websites
Changing an Element’s Type
Adding or Removing an Attribute
Deleting an Element
Keyboard Goodness
The H Key
Forcing an Element’s State
Select an Element
Use the Panel
Toggle the State of an Element
Debug an Element Shown Via JavaScript
Is the Element in the HTML?
Is the Element Added to the HTML on Hover?
Break JavaScript
Subtree Modification
Attribute Modification
Node Removal
Using the Debugger Keyword
Formatting the Source Code to Be Easier to Read
Copying an Element’s HTML Along With Its CSS
Rendered Fonts
Checking for Unused CSS
Color-Switching With the DevTools
Copying CSS From the DevTools to the Source Code
Copy Directly From the Inline Inspector
Use the changes Feature in Firefox Browser
Debugging Source-Map Files
Debugging Accessibility Issues Caused by CSS
Give the Text Sufficient Color Contrast
Think Twice Before Hiding With display: none
Use the Accessibility Tree
Fix Unclickable Elements
Debugging CSS Performance
Multiple Browser Profiles
Rendering and Emulation
CSS Print Styles
CSS Media prefer-color-scheme
CSS Media prefers-reduced-motion
Virtual Machines
Online Services
Mobile Devices
Mobile Browsers
Inspecting Your Mobile Browser
Mobile Simulators
Browser Support
Can I Use
Vendor Prefixes
Wrapping Up
CSS Properties That Commonly Lead to Bugs
Box Sizing
Display Type
Inline Elements
Spacing and Inline Elements
Block Elements
Spacing Below an Image
The legend Element
Using display With Positioned Elements
Alignment of Inline Elements
An Inline Display Overriding One in a CSS File
Float and Block Display
Float and Flex Display
Showing and Hiding the br Element
Situations to Avoid the Display Type
To Hide a Form’s Input Label
To Style a Checkbox
Margin
Margin Collapse
Margin and Inline Elements
Just-in-Case Margin
Centering an Element
Auto Margin and Positioning
Auto Margin and Flexbox
Padding
Using Padding With Height
Padding and Inline Elements
The Padding Shorthand
Percentage-Based Padding
Width Property
Inline Elements Don’t Accept a Width or Height
Fixed Width Is Not Recommended
Full Width for Image
Using 100% vs. auto for Width
An Image With position: absolute Doesn’t Need Width or Height
Height Property
Full Percentage-Based Height
Filling the Height of the Remaining Space Available
Percentage-Based Width and No Height
Height and Viewport Units
Setting a Minimum or Maximum Width
Minimum Width
Minimum Width for Buttons
Minimum Width and Padding
Which Has Higher Priority: min-width or max-width?
Resetting min-width
Setting to 0
Setting to initial
Max Width
Max Width for Page Wrappers
Percentage for Maximum Width
Setting a Maximum Width Based on the Content
Constraining an Image in a Wrapper
Resetting max-width
The none Keyword Value
The initial Keyword Value
The unset Keyword Value
Minimum Height
Setting a Minimum Height for Variable Content
Setting a Minimum Height for Positioned Elements
Maximum Height
Setting a Maximum Height for Positioned Elements
Setting a Percentage-Based Maximum Height
Transitioning an Element’s Height
Maximum Height Depending on the Element’s Defined Height
Shorthand vs. Longhand Properties
Positioning
Using the Positioning Offset Properties
Icon Alignment
Using the width and height Properties
How Padding Works for Positioned Elements
Using z-index
Resetting the Position
The Z-Index Property
Forgetting to Set the Position
Default Stacking Order
CSS Properties That Create a Stacking Context
An Element Can’t Appear Above Its Parent’s Siblings
An Element Floating Above Its Siblings
The calc() Function
Text Alignment
Forgetting to Center a Button’s Content
Viewport Units
Using height: 100vh Is Risky
Pseudo-Elements
Forgetting the content Property
Using Width or Height
Using Pseudo-Elements With Grid or Flexbox
When to Use ::before and When to Use ::after
Color
The transparent Keyword
Not Taking Advantage of the Cascade
Forgetting the Hash Notation
CSS Backgrounds
The Order of the Background’s Size and Position
Don’t Use the Shorthand to Set a Color Only
Dynamic Background
Forgetting About background-repeat
Printing CSS and Backgrounds
CSS Selectors
Forgetting the Dot Notation for Classes
Grouping Selectors
Calling a CSS Selector More Than Once
Customizing an Input’s Placeholder
The Order of User-Action Pseudo-Classes
Targeting an Element With More Than One Class
Targeting Classes on Particular Elements
An Alternative to !important
CSS Borders
Border on Hover
Multiple Borders
Border and currentColor keyword
Border Transition on Hover
Changing a Border’s Width Based on Screen Size
Adding a Border to Text Content
border: none vs. border: 0
Focus Outline
Box Shadow
A Shadow on One Side of an Element
box-shadow and overflow: hidden Don’t Mix Well
Multiple Box Shadows
White-Space Issue With Box Shadow and Inline Image
Box Shadow on Header Element
Shadow on Arrow of Speech Bubble
An inset Shadow on Image Elements
Using an Additional HTML Element for the Border
Using an SVG image
CSS Transforms
Applying Multiple Transforms
The Order of CSS Transforms Matters
Overriding a Transform by Mistake
Individual Transform Properties
Transforming SVG Elements
Using Transforms to Rotate Text by 90 Degrees
CSS Custom Properties (Variables)
Scoped vs. Global Variables
Setting a Fallback for a Variable
Retrieving All CSS Variables Defined in a Document
Invalidation at Computed-Value Time
Horizontal Scrolling
Firefox Shows a scroll Label
Finding Horizontal Scrolling Bugs
Scrolling to the Left or Right
Using JavaScript to Get Elements Wider Than the Body
Using outline
Fixing Horizontal Scrolling
A Fixed Width
A Positioned Element With a Negative Value
A Flexbox Wrapper Without Wrapping
A Grid Wrapper With minmax()
A Long Word or Inline Link
An Image Without max-width: 100%
Transition
Transition on Resize
Transitioning Height
Transitioning Visibility and Display
Overflow
overflow-y: auto vs. overflow-y: scroll
Scrolling on Mobile
Inline-Block Elements With overflow: hidden
Text Overflow
The !important Rule
Flexbox
User-Made Bugs
Forgetting flex-wrap
Using justify-content: space-between for Spacing
Using Padding and Negative Margin
Adding Empty Spacer Elements
Hiding a Flexbox Element in Certain Viewports
Stretched Images
Flexbox Child Items Are Not Equal in Width
Setting the Minimum Width to Zero With Flexbox
Flex Formatting Context
Browser Implementation Bugs
flex-basis Doesn’t Support calc()
Some HTML Elements Can’t Be Flex Containers
Inline Elements Not Treated as Flex Items
Importance Is Ignored in flex-basis When flex Shorthand Is Used
Centering a Flex Item With margin: auto Doesn’t Work With Flexbox Wrapper Set to Column
Flex Items Don’t Justify Correctly With max-width
Firefox’s Flexbox Inspector
CSS Grid
Unintentional Implicit Tracks
A Column With 1fr Computes to Zero
Equal 1fr Columns
Setting Percentage Values
Misusing auto-fit and auto-fill
Horizontal Scrolling and minmax
Browser Implementation Issues
Handling Long and Unexpected Content
Forgetting to Set Padding Between Text Label and Icon
Long Name in Media Object
Solution 1: Float
Solution 2: Flexbox
Wrapping Up
Breaking a Layout Intentionally
Add Long Text Content
forceFeed.js
Install
Include the Script
Add Attribute to Elements
Add the Arrays
Execute the Script
Try Content in Different Languages
Resize the Browser’s Window
Avoid Placeholder Images
Open in Internet Explorer
Rotate Between Portrait and Landscape Orientation
Wrapping Up
Browser Inconsistencies and Implementation Bugs
Using a CSS Reset File
Using Normalize.css
Browser Implementation Bugs
Verify the Bug
Decide on the Correct Behavior
Isolate the Bug
Test-Case Reduction
Example of Reduced Test Case
Make It Fail
Back Up Your Work
Document Everything
Test and Iterate
Research the Issue
Report to Browser Vendors
Never Throw Away a Debugging Demo
Regression Testing
BackstopJS Configuration File
Wrapping Up
General Tips and Tricks
Debugging Multilingual Websites
Common Bugs With LTR and RTL
Spacing Issues
Alignment Issues
Debugging RTL
A Quick Way to Add RTL Content
Using @supports
Browser Extensions
Grid Ruler
OLI Grid CSS
Web Developer Extension
Pesticide Extension
Mocking Up in the Browser
Good Ol’ CSS Positioning
Hiding Design Elements
CSS Flexbox
CSS Grid Layout
CSS Viewport Units
CSS Columns
CSS Filters
Desaturating the Design
Wireframe Styling
Hover for Touch Screens
Using CSS to Show Potential Errors
Using a CSS Class Out of Context
Adding width or height Attributes to Elements
Acknowledgements