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