Unleashing the Power of CSS

Many new and improved features have landed in CSS over the past few years, and a cross- browser effort to improve compatibility has made the language more stable than ever! The coordinated implementation of new features across browsers these days means we can start to use these features pretty much...

Descripción completa

Detalles Bibliográficos
Otros Autores: Eckles, Stephanie, author (author)
Formato: Libro electrónico
Idioma:Inglés
Publicado: [Place of publication not identified] : SitePoint Pty. Ltd [2023]
Materias:
Ver en Biblioteca Universitat Ramon Llull:https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009752736406719
Tabla de Contenidos:
  • Unleashing the Power of CSS: Advanced Techniques for Responsive User Interfaces
  • Notice of Rights
  • Notice of Liability
  • Trademark Notice
  • About SitePoint
  • About the Author
  • Preface
  • Who Should Read This Book?
  • Conventions Used
  • Code Samples
  • Tips, Notes, and Warnings
  • Supplementary Materials
  • Chapter 1: What You've Missed in CSS Land
  • New and Enhanced Properties
  • Custom Properties
  • aspect-ratio
  • Individual Transform Properties
  • Logical Properties
  • New and Extended Selectors
  • Enhanced :not()
  • Focus Selectors
  • ::marker
  • Improvements for Element Styling
  • accent-color
  • color-scheme
  • Forced-color Modes
  • Text Decoration Improvements
  • Color Fonts
  • New and Updated Properties for Layout and Scroll Behavior
  • gap
  • Scroll Control Properties
  • Dynamic Viewport Units
  • Modern Responsive Design Features
  • Container Queries
  • Container Units
  • Media Query Range Syntax
  • A Paradigm-shift for CSS Organization
  • Using New CSS Features
  • @supports
  • Build Tools for Modern CSS Support
  • Looking Towards the (Near) Future
  • Chapter 2: Using the CSS :has() Selector for Scaling Reusable Components
  • An Introduction to the :has() Selector
  • Limitations of the :has() Selector
  • :has() Isn't a Forgiving Selector
  • :has() Can't Be Nested within Another :has()
  • :has() Can't Detect the Presence of Pseudo-elements
  • Using :has() for Proactive Component Styling
  • Button Layouts Using :has() and :not()
  • Linking Sibling Styles with State Selection
  • Preventing Page Scroll for an Open Dialog
  • Alternate Grid Layouts for a Hero Component
  • Change Grid Layout Using Quantity Queries
  • Safely Using :has() Today
  • The Future of :has()
  • Additional Resources for Learning :has()
  • Chapter 3: Practical Uses of Container Queries
  • Container Queries vs Viewport Media Queries
  • Defining Container Queries.
  • Upgrading a Card Component
  • Applying Container Query Styles to Flexbox and Grid Items
  • Container Queries and Fluid Typography
  • Shipping Resilient Components
  • Coordinating the Visibility of Component Parts
  • Using Named Containers for Targeted Queries
  • Shorthand Syntax
  • Improving Accessibility with Container Queries
  • Container Style Queries
  • Support for Container Queries
  • The Future of Container Queries
  • Additional Resources
  • Chapter 4: Responsive CSS Layout without Media Queries
  • Responsive Spacing
  • Properties Used for Spacing
  • Padding and clamp()
  • Margin and min()
  • Gap and Layout Spacing
  • Responsive Sizing
  • Using Math Functions for Contextual Sizing
  • Responsive Layout Grids
  • Reducing Risk of Layout Overflow
  • Responsive Containers
  • Review of Responsive Techniques
  • Additional Resources.