book

CSS Master, 2nd Edition

Name: CSS Master, 2nd Edition
Author: Tiffany B Brown
ISBN: 9780648331506

by Tiffany B Brown

October 2018

Intermediate to advanced

354 pages

6h 1m

English

SitePoint

Read now

Unlock full access

CSS Master, 2nd Edition
Notice of RightsNotice of LiabilityTrademark NoticeAbout SitePointAbout Tiffany B. Brown
Preface
What's Changed in This Edition?Who Should Read This Book?Conventions UsedCode SamplesTips, Notes, and Warnings
Chapter 1: CSS Architecture and Organization
File OrganizationSpecificityChoose Low-specificity SelectorsAvoid Chaining Class SelectorsAvoid Using id SelectorsMinimize Nesting When Using a PreprocessorUse Type and Attribute Selectors with CautionChoosing What to Name ThingsBlock-Element-Modifier (BEM)Atomic CSSThe Case Against Atomic CSSBEM versus Atomic CSSKnow when to go your own wayConclusion
Chapter 2: Debugging and Optimization
Browser-based Developer ToolsUsing the Styles PanelDebugging Responsive LayoutsDebugging for UI ResponsivenessWhat Are Reflows and Repaints?Performance ToolsIdentifying Which Lines to RemoveMinificationInstalling CSSOMinification with CSSOCode-quality ToolsstylelintUnCSSConclusion
Chapter 3: Custom Properties
Defining a Custom PropertyUsing Custom PropertiesSetting a Fallback ValueCustom Properties and the CascadeUsing Custom Properties with JavaScriptCustom Properties and ComponentsUsing Custom Properties and Media QueriesConclusion
Chapter 4: Working with Text
Better-looking Text with @font-faceSetting an @font-face RuleUsing Multiple Font FormatsFonts and OriginsUsing Multiple Font Weights and StylesVariable FontsIncorporating Variable FontsSpecifying Font Weight When Using Variable FontsLower-level Font Control with font-variation-settingsStrategies for Font OptimizationOptimizing Font File Size with unicode-rangeHow to Subset a FontSubsetting Using Google FontsSubsetting Self-hosted Fonts with FontToolsWriting ModesWhat Is a Writing Mode?Setting the Direction of Text with the direction PropertyUsing the HTML dir Attribute Is BestSetting Block Flow Direction with the writing-mode PropertyManaging Typesetting with text-orientationWriting Mode and AlignmentConclusion
Chapter 5: Layouts
Display Types and Normal FlowBlock Formatting versus Inline FormattingBox Dimensions and the Box ModelManaging Box Dimensions with box-sizingFloating Elements and Normal FlowClearing FloatsClearfixPositioning and Stacking ElementsUsing CSS Multicolumn LayoutDefining Column Number and Width Using columnsSpacing Columns with column-gap and column-ruleImages Within ColumnsMaking Elements Span ColumnsManaging Column Breaks Within ElementsOptimizing the User InterfaceCreating Layouts with CSS GridThe Grid Formatting ContextDefining a Grid LayoutExplicit Grid versus Implicit GridsSpecifying Track Size for an Implicit GridCreating Flexible Grids with Flex UnitsUsing the grid-template Shorthand PropertyRepeating Rows and ColumnsLine-based Grid PlacementUsing Named Grid AreasSpacing Grid ItemsImages Within GridsGrid ConclusionCreating Flexible Layouts with FlexboxA New Media Object ComponentCreating Flexible Form Components with flexVertical Centering with FlexboxCreating Grid-like Layouts with FlexboxLearning More about FlexboxBox Alignment and DistributionDistributing Items in the Main Dimension with justify-contentAligning Items in the Cross Dimension with align-contentAligning Items with align-items and align-selfChoosing flex or gridConclusion
Chapter 6: Transitions and Animations
CSS TransitionsCreating Your First TransitionUsing the transition PropertyTransition Durations and DelaysTiming FunctionsTransitioning Multiple PropertiesMultiple Transitions and transitionend EventsCSS AnimationCreating Your First AnimationAnimation PropertiesTo Loop or Not to Loop: The animation-iteration-count PropertyPlaying Animations: the animation-direction PropertyUsing Percentage KeyframesThe animation-fill-mode PropertyPausing AnimationsDetecting When Animations Start, End, or RepeatA Note About AccessibilityA Note About PerformanceConclusion
Chapter 7: Transforms
How Transforms Affect Layouttransform Creates a Containing Blocktransform Creates a New Stacking Contexttransform Creates a Local Coordinate System2D Transform Functionsrotate()2D Scaling Functions: scale, scaleX, and scaleY2D Translation Functions: translateX, translateY, and translateskew, skewX, and skewYCurrent Transform MatrixMatrix Multiplication and the Matrix Functions3D Transform FunctionsrotateX() and rotateY()Rotating around Multiple Axes with rotate3d()The perspective() FunctionTranslating Depth with translateZ() and translate3d()Scaling the Z-dimension: scaleZ() and scale3d()Creating Depth with the perspective PropertyModifying the Point of View with perspective-originPreserving Three Dimensions with transform-styleShowing Both Faces with the backface-visibility PropertyConclusion
Chapter 8: Applying CSS Conditionally
Media Queries and @mediaMedia Query Syntax: The BasicsRange Media Feature Queries and min- and max- PrefixesDiscrete Media Feature QueriesImproving Accessibility with prefers-reduced-motionNesting @media RulesWorking around Legacy Browser Support with onlyNegating Media QueriesOther Ways to Use Media QueriesContent-driven Media QueriesUsing Media Queries with JavaScriptListening for Media ChangesTesting for Property Support with @supportsCSS.supports DOM APIUnderstanding the Cascade for @supports and @mediaConclusion

Chapter 9: Using CSS with SVG
Vector Images versus Raster ImagesAssociating CSS with SVG DocumentsUsing the style AttributeEmbedding CSS in SVG DocumentsLinking from SVG to an External CSS FileDifferences between SVG and HTMLSVG Doesn’t Adhere to the CSS Box ModelSVG Lacks a Positioning SchemeStyling SVG ElementsAnimating and Transitioning SVG CSS PropertiesAn Animated Path FutureUsing SVG with Media QueriesUsing Media Queries with background-sizeConclusion
Chapter 10: Conclusion
CSS ShapesCSS MaskingScroll SnapBlend Modes and CSS FiltersHow to Follow Changes and Additions to CSSTracking Browser SupportDocumentation and Tutorials

Content preview from CSS Master, 2nd Edition

Chapter 5: Layouts

CSS layouts have come a long way in recent years. Not so long ago, we were wrestling with div soup in our HTML documents and using heavy CSS frameworks that relied on floats and clearing to get our layouts working just right. Or we threw a bunch of JavaScript at them. These days, it’s much easier to create the kinds of complex layouts that used to require nested elements or expensive DOM operations.

In this chapter, we’ll look at several aspects of CSS layout. In the first half, we’ll review some of the basics: normal flow, floated elements, and how to clear them. We’ll follow that up with refreshers on both the box model and stacking context. Understanding these concepts will help you diagnose and fix layout bugs.

In the ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781492070993Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

CSS Master, 2nd Edition

by Tiffany B Brown

Chapter 5: Layouts

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.