The Scope of This Book... xxii A Quick Note About Browsers and Platforms... xxii The Appendices and Further Resources...xxiii

Size: px

Start display at page:

Download "The Scope of This Book... xxii A Quick Note About Browsers and Platforms... xxii The Appendices and Further Resources...xxiii"

Buck Miles
5 years ago
Views:

1 CONTENTS IN DETAIL FOREWORD by Joost de Valk PREFACE xvii xix INTRODUCTION xxi The Scope of This Book... xxii A Quick Note About Browsers and Platforms... xxii The Appendices and Further Resources...xxiii 1 INTRODUCING CSS3 1 What CSS3 Is and How It Came to Be... 2 A Brief History of CSS CSS3 Is Modular... 2 Module Status and the Recommendation Process... 3 CSS3 Is Not HTML Let s Get Started: Introducing the Syntax... 4 Browser-Specific Prefixes... 7 Future-Proofing Experimental CSS... 8 Getting Started MEDIA QUERIES 9 The Advantages of Media Queries Syntax Media Features Width and Height Device Width and Height Using Media Queries in the Real World Orientation Aspect Ratio Pixel Ratio Multiple Media Features Mozilla-Specific Media Features Summary Media Queries: Browser Support SELECTORS 23 Attribute Selectors New Attribute Selectors in CSS Beginning Substring Attribute Value Selector Ending Substring Attribute Value Selector... 27

2 Arbitrary Substring Attribute Value Selector Multiple Attribute Selectors The General Sibling Combinator Summary Selectors: Browser Support PSEUDO-CLASSES AND PSEUDO-ELEMENTS 33 Structural Pseudo-classes The nth-* Pseudo-classes first-of-type, last-child, and last-of-type only-child and only-of-type Other Pseudo-classes target empty root not UI Element States Pseudo-elements The selection pseudo-element Summary DOM and Attribute Selectors: Browser Support WEB FONTS 49 Rule Defining Different Faces True vs. Artificial Font Faces A Syntax Using Local Fonts Font Formats The Final Bulletproof Syntax The Fontspring Bulletproof Syntax Licensing Fonts for Web Use A Real-World Web Fonts Example More Font Properties font-size-adjust font-stretch OpenType Features Summary Web Fonts: Browser Support TEXT EFFECTS AND TYPOGRAPHIC STYLES 65 Understanding Axes and Coordinates Applying Dimensional Effects: text-shadow Multiple Shadows Letterpress Effect Adding Definition to Text: text-outline and text-stroke x

3 More Text Properties Restricting Overflow Resizing Elements Aligning Text Wrapping Text Setting Text Rendering Options Applying Punctuation Properties Summary Text Effects: Browser Support MULTIPLE COLUMNS 81 Column Layout Methods Prescriptive Columns: column-count Dynamic Columns: column-width A Note on Readability Different Distribution Methods in Firefox and WebKit Combining column-count and column-width Column Gaps and Rules Containing Elements within Columns Elements Spanning Multiple Columns Elements Breaking over Multiple Columns Summary Multiple Columns: Browser Support BACKGROUND IMAGES AND OTHER DECORATIVE PROPERTIES 93 Background Images Multiple Background Images Background Size Background Clip and Origin background-repeat Background Image Clipping Image Masks Summary Background Images: Browser Support BORDER AND BOX EFFECTS 107 Giving Your Borders Rounded Corners border-radius Shorthand Differences in Implementation Across Browsers Using Images for Borders Multicolored Borders Adding Drop Shadows Summary Border and Box Effects: Browser Support xi

4 10 COLOR AND OPACITY 119 Setting Transparency with the opacity Property New and Extended Color Values The Alpha Channel Hue, Saturation, Lightness HSLA The Color Variable: currentcolor Matching the Operating System s Appearance Summary Color and Opacity: Browser Support GRADIENTS 131 Linear Gradients Linear Gradients in Firefox Linear Gradients in WebKit Using Linear Gradients Adding Extra color-stop Values Radial Gradients Radial Gradients in Firefox Radial Gradients in WebKit Using Radial Gradients Multiple color-stop Values The WebKit Advantage Multiple Gradients Repeating Gradients in Firefox Repeating Linear Gradients Repeating Radial Gradients Summary Gradients: Browser Support D TRANSFORMATIONS 147 The transform Property rotate Position in Document Flow transform-origin translate skew scale Multiple Transformations Transforming Elements with Matrices Reflections with WebKit Summary D Transformations: Browser Support xii

5 13 TRANSITIONS AND ANIMATIONS 163 Transitions Property Duration Timing Function Delay Shorthand The Complete Transition Example Multiple Transitions Triggers More Complex Animations Key Frames Animation Properties The Complete Animations Example Multiple Animations Summary Transitions and Animations: Browser Support D TRANSFORMATIONS 179 3D Elements in CSS Transform Style The Transformation Functions Rotation Around an Axis Translation Along the Axis Scaling The Transformation Matrix Perspective The perspective and perspective-origin Properties The Transformation Origin Showing or Hiding the Backface Summary D Transformations: Browser Support FLEXIBLE BOX LAYOUT 195 Triggering the Flexible Box Layout The box Value in Firefox Inline Boxes Making the Boxes Flexible Unequal Ratios Zero Values and Firefox Layouts Grouping Flexible Boxes Changing Orientation Changing the Order of Flexible Boxes Reversing the Order Further Control over Ordering xiii

6 Alignment Same-Axis Alignment Multiple Rows or Columns Cross-Browser Flex Box with JavaScript Stop the Presses: New Syntax Summary Flexible Box Layout: Browser Support TEMPLATE LAYOUT 215 Setting Up the JavaScript Using position and display to Create Rows Multiple Rows Slots and the ::slot() Pseudo-element Creating Empty Slots Setting Height and Width on Rows and Columns Width Keyword Values Setting Both Row Height and Column Width Default Content: Sign Summary Template Layout: Browser Support THE FUTURE OF CSS 229 Mathematical Operations Calculation Functions Cycle The Grid Positioning Module Implicit and Explicit Grids The Grid Unit (gr) Extended Floats Extending the Possibilities of Images Image Fallback Image Slices Image Sprites Grouping Selectors Constants and Variables WebKit CSS Extensions CSS Variables Extending Variables Using Mixins CSS Modules Nested Rules Haptic Feedback Summary Future CSS: Browser Support xiv

7 A CSS3 SUPPORT IN CURRENT MAJOR BROWSERS 251 Media Queries (Chapter 2) Selectors (Chapter 3) Pseudo-classes and Pseudo-elements (Chapter 4) Web Fonts (Chapter 5) Text Effects and Typographic Styles (Chapter 6) Multiple Columns (Chapter 7) Background Images and Other Decorative Properties (Chapter 8) Border and Box Effects (Chapter 9) Color and Opacity (Chapter 10) Gradients (Chapter 11) D Transformations (Chapter 12) Transitions and Animations (Chapter 13) D Transformations (Chapter 14) Flexible Box Layout (Chapter 15) Template Layout (Chapter 16) The Future of CSS (Chapter 17) B ONLINE RESOURCES 257 CSS Modules Browsers WebKit Firefox Opera Internet Explorer Browser Support When Can I Use Quirks Mode Find Me By IP Feature Detection and Simulation Perfection Kills Modernizr CSS3 Pie Code-Generation Tools CSS3, Please! CSS3 Generator CSS3 Gradient Generator Type Folly Web Fonts Typekit Fontdeck Fonts.com Web Fonts Google Font API Web FontFonts Font Squirrel Fontspring xv

8 Other Resources CSS3.info CSS3 Watch CSS3 Cheat Sheet INDEX 265 xvi

INDEX. Symbols and Numbers

INDEX. Symbols and Numbers INDEX Symbols and Numbers & (ampersand character), for nested selector, 247 * (asterisk), for Arbitrary Substring Attribute Value selector, 28 @ (at sign), for element default content, 226 228 ` (backtick