CSS Master, 3rd Edition
- Length: 360 pages
- Edition: 3
- Language: English
- Publisher: SitePoint
- Publication Date: 2021-09-14
- ISBN-10: 1925836428
- ISBN-13: 9781925836424
- Sales Rank: #436143 (See Top 100 Books)
CSS has grown from a language for formatting documents into a robust languagefor designing web applications. Its simplicity is deceptive, however. It belies the complexity of the box model, stacking contexts, specificity, and the cascade. CSS mastery lies in understanding these concepts and how to take advantage of them.
This book will show you how to write better, more efficient CSS, and to use the plethora of the new cutting-edge CSS features available to the front-end developer. You’ll also learn to master tools that will improve your workflow.
- Organize your CSS to create efficient, reusable, and maintainable code
- Discover complex layout techniques: grid layouts, multi-column layouts, and more
- Use advanced effects: transitions, transforms, filter effect, and animations
- Re-use and dynamically control CSS values with custom properties
- Combine CSS and SVG to create seriously powerful graphics
This edition has been thoroughly updated to cover newer CSS features and techniques, including new chapters on visual effects and managing document scroll.
CSS Master, 3rd Edition Notice of Rights Notice of Liability Trademark Notice About SitePoint About the Author Preface What’s Changed in This Edition? Who Should Read This Book? Conventions Used Code Samples Tips, Notes, and Warnings Supplementary Materials Chapter 1: Selectors Types of Selectors Combinators The Descendant Combinator The Child Combinator The Adjacent Sibling Combinator The General Sibling Combinator Attribute Selectors Matching Space-separated Attribute Values Matching Hyphenated Attribute Values Matching Attribute Values by Substring Matching Attribute Values by Case Pseudo-classes and Pseudo-elements Pseudo-elements ::before and ::after Creating Typographic Effects with ::first-letter Creating Typographic Effects with ::first-line User Interface Fun with ::selection Custom List and Summary Icons with ::marker Styling Input ::placeholder Values Pseudo-classes Styling the :root of a Document Highlighting Page Fragments with :target Styling Elements That Have No Children Using :empty Concise and Resilient Selectors with :is() Negating Selectors with :not() Adjusting Selector Specificity with :where() Selecting Elements by Their Index Selecting Elements of a Particular Type by Their Index Styling Form Fields Based on Input Conclusion Chapter 2: CSS Architecture and Organization File Organization Specificity Understanding the Impact of !important Choosing Low-specificity Selectors Avoid Chaining Selectors Avoid Using ID Selectors Minimizing Nesting When Using a Preprocessor Using Type and Attribute Selectors with Caution Choosing What to Name Things Block-Element-Modifier (BEM) Atomic CSS The Case Against Atomic CSS Know When to Go Your Own Way Conclusion Chapter 3: Debugging and Optimization Browser-based Developer Tools Using the Styles Panel Debugging Flexbox and Grid Layouts Debugging Responsive Layouts Debugging for UI Responsiveness What Are Reflows and Repaints? Performance Tools Identifying Which Lines to Remove Minification with CSS Optimizer Installing CSSO with npm Running CSSO with npx Using CSSO Enforcing Code Quality with stylelint Using stylelint and Understanding Its Output Configuring stylelint’s Rules Using stylelint with npx Consider a Task Runner or Build Tool Conclusion Chapter 4: Custom Properties Defining a Custom Property Using Custom Properties Setting a Fallback Value Custom Properties and the Cascade Custom Properties and Color Palettes Using Custom Properties and Media Queries Using Custom Properties with JavaScript Custom Properties and Components Conclusion Chapter 5: Layouts Display Types and Normal Flow Block Formatting versus Inline Formatting Logical Properties Box Dimensions and the Box Model Managing Box Dimensions with box-sizing Preventing Box Generation with display: contents Floating Elements and Normal Flow Clearing Floats Clearfix Positioning and Stacking Elements Outside-the-box Layouts with CSS Shapes Using Shape Functions Using Images The Shape of the Future (or the Future of Shapes) Using CSS Multicolumn Layout Defining Column Number and Width Using columns Spacing Columns with column-gap and column-rule Images within Columns Making Elements Span Columns Managing Column Breaks within Elements Optimizing the User Interface Creating Flexible Layouts with Flexbox Understanding the flex Property Using the flex Property Flex Factors and Space Distribution Creating Multi-line Flexible Layouts Distributing Space Vertically with flex-direction Creating Layouts with CSS Grid The Grid Formatting Context Defining a Grid Layout Explicit Grid versus Implicit Grids Specifying Track Size for an Implicit Grid Creating Flexible Grids with Flex Units Using the grid-template Shorthand Property Repeating Rows and Columns Line-based Grid Placement Using Named Grid Areas Spacing Grid Items Images within Grids Progressively Enhanced Layouts with Grid and display: contents Grid Conclusion Box Alignment and Distribution Distributing Items in the Main Axis with justify-content Aligning Items in the Cross Dimension with align-content Aligning Items with align-items and align-self Choosing flex or grid Conclusion Chapter 6: Working with Text Better-looking Text with @font-face Setting an @font-face Rule Using Multiple Font Formats Fonts and Origins Using Multiple Font Weights and Styles Variable Fonts Incorporating Variable Fonts Specifying Font Weight When Using Variable Fonts Lower-level Font Control with font-variation-settings Shaping Loading Behavior with font-display Understanding auto Optimizing Fonts with Subsetting and unicode-range Subsetting Self-hosted Fonts with FontTools Writing Modes What Is a Writing Mode? Setting the Direction of Text with the direction Property Using the HTML dir Attribute Is Best Setting Block Flow Direction with the writing-mode Property Managing Typesetting with text-orientation Writing Mode and Alignment Conclusion Chapter 7: Transitions and Animations CSS Transitions Creating Your First Transition Using the transition Property Transition Durations and Delays Timing Functions Transitioning Multiple Properties Multiple Transitions and transitionend Events CSS Animation Creating Your First Animation Animation Properties To Loop or Not to Loop: The animation-iteration-count Property Playing Animations: The animation-direction Property Using Percentage Keyframes The animation-fill-mode Property Pausing Animations Detecting When Animations Start, End, or Repeat Animation and Accessibility A Note about Performance Conclusion Chapter 8: Transforms How Transforms Affect Layout transform Creates a Containing Block transform Creates a New Stacking Context transform Creates a Local Coordinate System 2D Transform Functions rotate() 2D Scaling Functions: scale(), scaleX(), and scaleY() 2D Translation Functions: translateX(), translateY(), and translate() skew, skewX, and skewY Current Transform Matrix Matrix Multiplication and the Matrix Functions 3D Transform Functions rotateX() and rotateY() Rotating around Multiple Axes with rotate3d() The perspective() Function Translating Depth with translateZ() and translate3d() Scaling the Z-dimension: scaleZ() and scale3d() Creating Depth with the perspective Property Modifying the Point of View with perspective-origin Preserving Three Dimensions with transform-style Showing Both Faces with the backface-visibility Property Conclusion Chapter 9: Visual Effects Blend Modes mix-blend-mode background-blend-mode Blend Mode Values Filter Effects Meet the CSS Filter Functions Using backdrop-filter How Filter Effects Affect Layout Clipping and Masking The clip-path Property Creating More Complex Clipping Regions with path() Masking Conclusion Chapter 10: Applying CSS Conditionally Media Queries and @media Media Query Syntax: The Basics Range Media Features and min- and max- Prefixes Discrete Media Features Using prefers-reduced-motion to Improve the Experience of People with Vestibular and Seizure Disorders Respecting Users Color Preferences with prefers-color-scheme Nesting @media Rules Working around Legacy Browser Support with only Negating Media Queries Other Ways to Use Media Queries Content-driven Media Queries Using Media Queries with JavaScript Listening for Media Changes Testing for Property Support with Feature Queries Determining Selector Support with selector() CSS.supports DOM API Understanding the Cascade for @supports and @media Conclusion Chapter 11: CSS and Scrolling Dump the Jump: Smooth Internal Links with scroll-behavior What Is a Scrolling Box? Scroll Snap Creating a Scroll Snap Container Aligning Scrolled Elements with scroll-snap-align Don’t Break Scrolling! Optimizing the Scroll Viewing Area with scroll-padding Shifting Box Alignment with scroll-margin Conclusion Chapter 12: SVG Vector Images versus Raster Images Associating CSS with SVG Documents Using the style Attribute Embedding CSS in SVG Documents Linking from SVG to an External CSS File Differences between SVG and HTML SVG Doesn’t Adhere to the CSS Box Model SVG Lacks a Positioning Scheme Styling SVG Elements Using SVG Attributes as CSS Properties Animating and Transitioning SVG CSS Properties An Animated Path Future Using SVG with Media Queries Using Media Queries with background-size Conclusion Chapter 13: Conclusion Nested Grids with subgrid Creating Brick-like Layouts with masonry Container Queries How to Follow Changes and Additions to CSS Tracking Browser Support Documentation and Tutorials
Donate to keep this site alive
1. Disable the AdBlock plugin. Otherwise, you may not get any links.
2. Solve the CAPTCHA.
3. Click download link.
4. Lead to download server to download.