Modern CSS
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...
| Otros Autores: | , |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Collingwood, Australia :
SitePoint Pty, Limited
2018.
|
| Edición: | 1st edition |
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009630499606719 |
Tabla de Contenidos:
- 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.
