Modern CSS

Modern CSS

by Craig Buckler, Ilya Bodrov-Krukowski, Claudio Ribeiro, Tiffany B Brown, David Attard, Ahmed Bouchefra
Released October 2018
Publisher(s): SitePoint
ISBN: 9781925836189

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

CSS has grown from a language for formatting documents into a robust language for designing web applications. Its syntax is easy to learn, making CSS a great entry point for those new to programming. Indeed, it's often the second language that developers learn, right behind HTML.

As CSS's feature set and abilities have grown, so has its depth. This book is a collection of articles that explore some of the amazing thngs that developers can do with CSS today; things that in the past might only have been achievable with some pretty complex JavaScript previously, if at all. It contains:

  • Using CSS Transforms in the Real World by Craig Buckler
  • Variable Fonts: What They Are, and How to Use Them by Claudio Ribeiro
  • Scroll Snap in CSS: Controlling Scroll Action by Tiffany B. Brown
  • Real World Use of CSS with SVG by Craig Buckler
  • CSS and PWAs: Some Tips for Building Progressive Web Apps by David Attard
  • 20 Tips for Optimizing CSS Performance by Craig Buckler
  • Advanced CSS Theming with Custom Properties and JavaScript by Ahmed Bouchefra

This book is for developers with some experience of CSS.

Publisher resources

View/Submit Errata

Table of contents

  1. Modern CSS
  2. Notice of Rights
  3. Notice of Liability
  4. Trademark Notice
  5. About SitePoint
  6. Preface
    1. Conventions Used
      1. Code Samples
      2. Tips, Notes, and Warnings
  7. Chapter 1: Using CSS Transforms in the Real World
    1. by Ilya Bodrov-Krukowski
    2. Vertically Aligning Children
    3. Creating Arrows
    4. Creating a “Jumping Ball” Loader
    5. Creating a “Spinner” Loader with SVG
    6. Creating a Flip Animation
    7. A Word of Caution
    8. Conclusion
  8. Chapter 2: Variable Fonts: What They Are, and How to Use Them
    1. by Claudio Ribeiro
    2. How We Got Here
    3. Variable Fonts
      1. Why are Variable Fonts Relevant?
    4. Using Variable Fonts
      1. font-optical-sizing
      2. font-style
      3. font-weight
      4. font-stretch
    5. Using font-variation-settings
    6. Performance
      1. Serving Different Files for Different Browsers
      2. Conclusion
  9. Chapter 3: Scroll Snap in CSS: Controlling Scroll Action
    1. by Tiffany B. Brown
  10. Chapter 4: Real World Use of CSS with SVG
    1. by Craig Buckler
    2. SVG Benefits
    3. SVG Tools
    4. SVGs as Static Images
      1. CSS Inlined SVG Backgrounds
      2. CSS with SVG: Responsive SVG Images
    5. HTML-Inlined SVG Images
    6. SVG Sprites
    7. SVG Effects on HTML Content
    8. Portable SVGs
    9. Sophisticated SVGs
  11. Chapter 5: CSS and PWAs: Some Tips for Building Progressive Web Apps
    1. by David Attard
    2. What are PWAs?
    3. What is Required for Developing PWAs?
      1. 1. Create a Manifest File
      2. 2. Using a Service Worker
      3. 3. Install the Site Assets, Including CSS
    4. CSS and PWAs: Some Considerations
      1. Should the App Follow Platform-specific UIs?
      2. Platform-agnostic Design
      3. Device Capabilities
      4. Graceful Degradation and Progressive Enhancement
      5. General Suggestions
    5. PWA Frameworks
      1. 1. Create React App
      2. 2. Angular
      3. Ionic
    6. PWAs and Performance
      1. Google Lighthouse
    7. Wrapping Up
  12. Chapter 6: 20 Tips for Optimizing CSS Performance
    1. by Craig Buckler
    2. 1. Learn to Use Analysis Tools
      1. Online Options
    3. 2. Make Big Wins First
    4. 3. Replace Images with CSS Effects
    5. 4. Remove Unnecessary Fonts
    6. 5. Avoid @import
    7. 6. Concatenate and Minify
    8. 7. Use Modern Layout Techniques
    9. 8. Reduce CSS Code
    10. 9. Cling to the Cascade!
    11. 10. Simplify Selectors
    12. 11. Be Wary of Expensive Properties
    13. 12. Adopt CSS Animations
    14. 13. Avoid Animating Expensive Properties
    15. 14. Indicate Which Elements Will Animate
    16. 15. Adopt SVG Images
    17. 16. Style SVGs with CSS
    18. 17. Avoid Base64 Bitmap Images
    19. 18. Consider Critical CSS
    20. 19. Consider Progressive Rendering
    21. 20. Learn to Love CSS
  13. Chapter 7: Advanced CSS Theming with Custom Properties and JavaScript
    1. by Ahmed Bouchefra
    2. Understanding :root and var()
    3. CSS Custom Properties vs Preprocessor Variables
    4. Writing a Simple HTML Page
    5. Writing Basic CSS for Our HTML Page
    6. Adding a CSS Dark Theme
    7. Switching Themes with JavaScript
    8. Changing CSS Custom Properties with JavaScript
    9. Conclusion

Product information

  • Title: Modern CSS
  • Author(s): Craig Buckler, Ilya Bodrov-Krukowski, Claudio Ribeiro, Tiffany B Brown, David Attard, Ahmed Bouchefra
  • Release date: October 2018
  • Publisher(s): SitePoint
  • ISBN: 9781925836189