book

AdvancED CSS

by Joseph R. Lewis, Meitar Moscovitz

July 2009

Intermediate to advanced

386 pages

11h 17m

English

Apress

Read now

Unlock full access

Chapter 1: MARKUP UNDERPINS CSSThe linguistics of markup languagesXML dialects: the many different flavors of contentRSS and Atom: content syndication formatsSVG: vector-based graphics in XMLUser agents: our eyes and ears in cyberspaceUnderstanding users and their agentsWhy giving the user control is not giving upAbstracting content's presentation with CSSThe nature of output: grouping output with CSS media typesConsiderations for targeting media typesTargeting screensThe screen media typeThe projection media typeThe handheld media typeThe print media typeAural mediaFeature detection via CSS media queriesOne document, multiple facesComplementing semantics with CSSSummary
Origins of a style sheet and the CSS cascadeUser agent style sheets (default browser styles)User style sheetsUser style sheet support in web browsersAttributes and characteristics of author style sheetsExternal and embedded style sheetsNaming and specifying media and character encoding detailsInline stylesSelectors: from simple to complex to surgicalSimple selectorsType selectorsUniversal type selectorAttribute selectorsID and class selectorsPseudo-classesPseudo-elementsUsing combinatorsDescendant combinatorChild combinatorAdjacent sibling combinatorGeneral sibling combinatorProperty values and unitsKeywords and font namesNumbersLengthsPercentagesTime, frequencies, and anglesStringsFunctional notationURI references: the url() functionColor functions: rgb(), rgba(), hsl(), and hsla()Generated content functions: attr() and counter()Basic math for computing lengths: the calc() functionVisual rendering and formatting conceptsCSS boxes and document flowCSS positioning schemesStatic positioningRelative positioningAbsolute positioningFixed positioningFloated CSS boxesStacking contextsCSS box models: content-box model vs. border-box modelSummary
Chapter 3: CSS-GENERATED CONTENTHow generated content worksGenerating content :before or :after any elementExposing metadata through the CSS attr() functionReplacing content with pseudo-contentLimitations on styling CSS-generated contentUnderstanding escape sequences in CSS stringsAdvanced list styling: marker boxes and numberingUsing built-in marker box stylesReplacing marker boxes with custom imagesManipulating the marker box's positionPositioning marker boxes outside or inside normal document flowMarker offsets and marker pseudo-elementsAutomatic numbering using CSS-generated countersAtypical numbering: counting backward, skipping numbers, counting with letters, and moreUsing multiple countersNumbering groups of elements and their siblingsDisplaying total countsCounter scope: exposing structure with nested countersSummary
Targeting a print style sheetLinking to print styles in HTMLTargeting print styles using @mediaTargeting print styles using @importPrinter style considerationsPrinting in colorThe tragedy of font colorUnitsImagesAdvanced page selectorsInserting and avoiding page breaksOrphans and widowsEstablishing a page size with @pageSetting @page margins with :left, :right, and :first pseudo-classesUsing margin at-rulesFuture of CSS print style sheetsExample: styling a résuméSummary
The arrival of the mobile WebThe limitations and challenges of mobile web developmentReduced and unpredictable screen sizesVaried interaction paradigms and usability implicationsReduced technology options and limited technical capabilitiesLimited bandwidth and higher latencyCompeting, overlapping, and incompatible technologiesA brief history of mobile web technologyA brief overview of mobile browsersOpera Mobile and Opera Mini (Presto)Internet Explorer MobileBlazer (NetFront)Openwave Mobile BrowserFennec (Gecko)Mobile Safari and Android (WebKit)11Comparing browsers and displaysDelivering mobile styleThe handheld media typeFormatting a page for handheld mediaEstablishing color and typographyDesigning for Mobile WebKitWhy optimize for WebKit?Previewing WebKit pagesBasic layout propertiesSetting the viewportUsing media queriesStyling links to be touch-friendlyUsing CSS selectors in JavaScriptWebKit CSS transforms and transitionsSummary
The need for organizationWhat organization looks likeUsing CSS features as architectureUnderstanding specificityApplying multiple style sheets to a pageThe grand order of at-rulesClassical inheritance schemes for style sheetsDefining design relationships using selector groupsGood coding principlesTaking advantage of inheritanceOrganizing from broad to specificAvoid overusing arbitrary <div> elements, IDs, or classesDividing style sheets into logical sectionsDividing design principles into filesUse the shortest URL that worksGood code formatting conventionsAlphabetize your declarationsConsistency is your allyTechniques for intra-team communicationCSS commentsComment headersComment signpostsCSSEditTextMatePersistent, preferred, and alternate style sheetsStyling for mediaCSS3 media queriesDeveloping a mobile strategySummary
Chapter 7: SEMANTIC PATTERNS FOR STYLING COMMON DESIGN COMPONENTSMarkup patterns and common authoring conventionsThe evolution of markup conventionsMicroformats: reusing markup patterns and adding semanticsHow microformats workRDFa: adding extensible vocabularies to semantic markupOpportunities and benefits of semantics for CSS developersStyling microformats with CSSStyling rel-tag linksStyling an hCardStyling an hCalendarStyling RDFa with CSSSummary
Leveling the playing field: “resetting CSS”Designing to the gridTools for grid diagnosticsCSS frameworksYUI CSS Foundation960 Grid SystemBlueprint CSSSummary
Using XML for your markupProblems with POSHFreedom from HTMLOh yeah? Well, XML sucks!Double the style sheet funCSS vs. XSLStyling a simple XML fileLinking a style sheetEmbedding a style sheetPutting the X back in eXtensibleExtending XHTML through namespacesStyling namespacesStyling namespaces in Internet ExplorerPainting SVGsSVG and CSS2SVG-specific styleBrowser support for SVGMaking an Atom feed more presentableAn integrated exampleSummary
Why optimize?Optimize to increase speedOptimize to lower bandwidth usage and costsOptimization vs. organizationOptimization techniquesOptimizing with CSS shorthand, selector groups, and inheritanceAvoid universal selectors or lengthy descendant selectorsPut CSS at the topPrefer <link> elements over @import rulesCompressing, combining, and minifying style sheetsAvoid CSS expressions and filtersReference external CSS instead of inline stylesUse absolute or fixed positioning on animated elementsDiagnostic tools for CSS performanceThe Firebug Net panelYSlow Firebug plug-inWebKit Web Inspector network timelineReflow and repaint timers and visualizersSummary
Chapter 11: EXPLORING THE EMERGENCE OF CSS3When will it be done?Using CSS3 todayUsing vendor extensions and “beta” featuresBrowser supportOpera (Presto)Safari (WebKit)Firefox (Gecko)Internet Explorer (Trident)Using new CSS3 featuresCSS3 color units and opacityGeneral sibling combinatorsCSS3 attribute matching selectorsCSS3 pseudo-classesE:rootE:nth-child(n)E:nth-of-type(n)E:nth-last-of-type(n)E:last-childE:first-of-typeE:last-of-typeE:only-childE:only-of-typeE:emptyE:targetE:enabled, E:disabled, and E:checkedE::selectionE:not(s)Typographic effects and web fontsWord wrapText shadowWeb fontsBorder and background effectsRounded cornersBox shadowMultiple backgroundsBackground image resizingAnimations, transitions, and transformsTransitionsTransformsAnimationSummary
The bright future of the WebExpanding CSS in printAudible CSSHTML5 and CSSInfluences, tensions, and competitors to CSSKeeping up-to-date = getting involvedParticipating in the W3CThe Web Standards ProjectExchanging ideasSummary

Content preview from AdvancED CSS

LAYOUT CONVENTIONS

To keep this book as clear and easy to follow as possible, the following text conventions are used throughout.

Important words or concepts are normally highlighted on the first appearance in bold type.
Code is presented in fixed-width font.
New or changed code is normally presented in bold fixed-width font.
Pseudo-code and variable input are written in italic fixed-width font.
Menu commands are written in the form Menu Submenu Submenu.
Where we want to draw your attention to something, we've highlighted it like this:

Ahem, ...