- Selectors Preface xvii
- CSS Architecture and Organization
- Debugging and Optimization
- Complex Layouts
- Transitions and Animation
- CSS Transforms
- Applying CSS Conditionally
- Using CSS with SVG
- Preprocessors
- 1 0. Conclusion
- Selecting Elements by Their Index
- Selecting Elements of a Particular Type by their Index
- Styling Form Fields Based on Input
- Selectors and Specificity
- Conclusion
- Organization
- CSS File Organization
- How many files?
- Managing Styles for Legacy Browsers
- Using Conditional Comments (IE9 and Earlier)
- Using CSS Parsing to Our Advantage
- Golden Guidelines for Writing Clean CSS
- Avoid Global Selectors
- Avoid Overly Specific Selectors
- Use Semantic Class Names
- Avoid Tying CSS Closely to Markup
- Block-Element-Modifier (BEM)
- Atomic CSS
- The Case Against Atomic CSS
- BEM versus Atomic CSS
- Conclusion
- Chapter 3 Debugging and Optimization
- Browser-based Developer Tools
- Using the Styles Panel
- Multi-device Tools
- Debugging for UI Responsiveness
- What is a reflow?
- Timeline Tools
- Identifying Lines to Remove
- Minification
- Installing CSSO
- Minification with CSSO
- Code-quality Tools
- CSS Lint
- analyze-css
- UnCSS
- Consider a Task Runner
- Conclusion
- Chapter 4 Complex Layouts
- Managing the CSS Box Model
- Choosing a Box Model with box-sizing
- Managing Layers with position and z-index
- 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
- Optimizing the User Interface
- Creating Flexible Layouts with Flexbox
- Creating Simple Grids with flex-wrap
- Creating Flexible Components with flex
- Property Letting Source Order Diverge from Layout: the order
- Vertical Centering with Flexbox
- Conclusion
- Chapter 5 Transitions and Animation
- 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
- Property To Loop or Not to Loop: The animation-iteration-count
- Playing Animations: the animation-direction Property
- Using Percentage Keyframes
- The animation-fill-mode Property
- Pausing Animations
- Detecting When Animations Start, End, or Repeat
- A Note About Accessibility
- A Note About Performance
- Conclusion
- Chapter 6 CSS Transforms
- The Current State of 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
- translate 2D Translation Functions: translateX, translateY, and
- 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()
- perspective() Function
- translate3d() Translating Depth with translateZ() and
- Scaling the Z-dimension: scaleZ() and scale3d()
- Creating Depth with the perspectiveProperty
- Modifying the Point of View with perspective-origin
- Preserving Three Dimensions with transform-style
- Showing Both Faces with the backface-visibility Property
- Conclusion
- Chapter 7 Applying CSS Conditionally
- Media Queries and @media
- Media Query Syntax: The Basics
- Range Media Feature Queries and min- and max- Prefixes
- Discrete Media Feature Queries
- 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
- Conditional Rules with @supports
- CSS.supports DOM API
- Understanding the Cascade for @supports and @media
- Conclusion
- Chapter 8 Using CSS with 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 Does Not Adhere to the CSS Box Model
- SVG Elements Cannot be Positioned
- Styling an SVG Element
- Creating SVG Sprites
- Animating and Transitioning SVG CSS Properties
- Using SVG with Media Queries
- Using Media Queries with background-size
- Conclusion
- Chapter 9 Preprocessors
- Installing Less
- Using Less from the Command Line
- Installing Sass
- Using Sass from the Command Line
- Ruleset Nesting
- @import and Partials
- Variables
- Variable Interpolation
- Mixins
- Mixins in Less
- Mixins in Sass
- Extending Selectors
- Extending in Less
- Extending in Sass
- Conclusion
- Chapter 10 Conclusion
- Grid Layout
- CSS Shapes
- Scroll Snap Points
- Blend Modes and CSS Filters
- How to Follow Changes and Additions to CSS
primo
(Primo)
#1