Modern CSS by Bouchefra, Ahmed -- Read -- Imperial Library of Trantor

Index

Modern CSS Notice of Rights Notice of Liability Trademark Notice About SitePoint Preface

Conventions Used

Code Samples Tips, Notes, and Warnings

Chapter 1: Using CSS Transforms in the Real World

by Ilya Bodrov-Krukowski Vertically Aligning Children Creating Arrows Creating a “Jumping Ball” Loader Creating a “Spinner” Loader with SVG Creating a Flip Animation A Word of Caution Conclusion

Chapter 2: Variable Fonts: What They Are, and How to Use Them

by Claudio Ribeiro How We Got Here Variable Fonts

Why are Variable Fonts Relevant?

Using Variable Fonts

font-optical-sizing font-style font-weight font-stretch

Using font-variation-settings Performance

Serving Different Files for Different Browsers Conclusion

Chapter 3: Scroll Snap in CSS: Controlling Scroll Action

by Tiffany B. Brown

Chapter 4: Real World Use of CSS with SVG

by Craig Buckler SVG Benefits SVG Tools SVGs as Static Images

CSS Inlined SVG Backgrounds CSS with SVG: Responsive SVG Images

HTML-Inlined SVG Images SVG Sprites SVG Effects on HTML Content Portable SVGs Sophisticated SVGs

Chapter 5: CSS and PWAs: Some Tips for Building Progressive Web Apps

by David Attard What are PWAs? What is Required for Developing PWAs?

1. Create a Manifest File 2. Using a Service Worker 3. Install the Site Assets, Including CSS

CSS and PWAs: Some Considerations

Should the App Follow Platform-specific UIs? Platform-agnostic Design Device Capabilities Graceful Degradation and Progressive Enhancement General Suggestions

PWA Frameworks

1. Create React App 2. Angular Ionic

PWAs and Performance

Google Lighthouse

Wrapping Up

Chapter 6: 20 Tips for Optimizing CSS Performance

by Craig Buckler 1. Learn to Use Analysis Tools

Online Options

2. Make Big Wins First 3. Replace Images with CSS Effects 4. Remove Unnecessary Fonts 5. Avoid @import 6. Concatenate and Minify 7. Use Modern Layout Techniques 8. Reduce CSS Code 9. Cling to the Cascade! 10. Simplify Selectors 11. Be Wary of Expensive Properties 12. Adopt CSS Animations 13. Avoid Animating Expensive Properties 14. Indicate Which Elements Will Animate 15. Adopt SVG Images 16. Style SVGs with CSS 17. Avoid Base64 Bitmap Images 18. Consider Critical CSS 19. Consider Progressive Rendering 20. Learn to Love CSS

Chapter 7: Advanced CSS Theming with Custom Properties and JavaScript

by Ahmed Bouchefra Understanding :root and var() CSS Custom Properties vs Preprocessor Variables Writing a Simple HTML Page Writing Basic CSS for Our HTML Page Adding a CSS Dark Theme Switching Themes with JavaScript Changing CSS Custom Properties with JavaScript Conclusion