Home Page Icon
Home Page
Table of Contents for
Title Page
Close
Title Page
by Meitar Moscovitz, Joseph R. Lewis
AdvancED CSS
Cover Page
Title Page
Copyright
Dedication
CONTENTS AT A GLANCE
CONTENTS
ABOUT THE AUTHORS
ABOUT THE TECHNICAL REVIEWER
ABOUT THE COVER IMAGE DESIGNER
Acknowledgments
Layout Conventions
Part 1: INTRODUCTION: DIGESTING THE WEB'S ALPHABET SOUP
Chapter 1: MARKUP UNDERPINS CSS
The linguistics of markup languages
XML dialects: the many different flavors of content
RSS and Atom: content syndication formats
SVG: vector-based graphics in XML
User agents: our eyes and ears in cyberspace
Understanding users and their agents
Why giving the user control is not giving up
Abstracting content's presentation with CSS
The nature of output: grouping output with CSS media types
Considerations for targeting media types
Targeting screens
The screen media type
The projection media type
The handheld media type
The print media type
Aural media
Feature detection via CSS media queries
One document, multiple faces
Complementing semantics with CSS
Summary
Chapter 2: CSS FUNDAMENTALS FOR ADVANCED USE
Origins of a style sheet and the CSS cascade
User agent style sheets (default browser styles)
User style sheets
User style sheet support in web browsers
Attributes and characteristics of author style sheets
External and embedded style sheets
Naming and specifying media and character encoding details
Inline styles
Selectors: from simple to complex to surgical
Simple selectors
Type selectors
Universal type selector
Attribute selectors
ID and class selectors
Pseudo-classes
Pseudo-elements
Using combinators
Descendant combinator
Child combinator
Adjacent sibling combinator
General sibling combinator
Property values and units
Keywords and font names
Numbers
Lengths
Percentages
Time, frequencies, and angles
Strings
Functional notation
URI references: the url() function
Color functions: rgb(), rgba(), hsl(), and hsla()
Generated content functions: attr() and counter()
Basic math for computing lengths: the calc() function
Visual rendering and formatting concepts
CSS boxes and document flow
CSS positioning schemes
Static positioning
Relative positioning
Absolute positioning
Fixed positioning
Floated CSS boxes
Stacking contexts
CSS box models: content-box model vs. border-box model
Summary
Part 2: ADVANCED CSS IN PRACTICE
Chapter 3: CSS-GENERATED CONTENT
How generated content works
Generating content :before or :after any element
Exposing metadata through the CSS attr() function
Replacing content with pseudo-content
Limitations on styling CSS-generated content
Understanding escape sequences in CSS strings
Advanced list styling: marker boxes and numbering
Using built-in marker box styles
Replacing marker boxes with custom images
Manipulating the marker box's position
Positioning marker boxes outside or inside normal document flow
Marker offsets and marker pseudo-elements
Automatic numbering using CSS-generated counters
Atypical numbering: counting backward, skipping numbers, counting with letters, and more
Using multiple counters
Numbering groups of elements and their siblings
Displaying total counts
Counter scope: exposing structure with nested counters
Summary
Chapter 4: OPTIMIZING FOR PRINT
Targeting a print style sheet
Linking to print styles in HTML
Targeting print styles using @media
Targeting print styles using @import
Printer style considerations
Printing in color
The tragedy of font color
Units
Images
Advanced page selectors
Inserting and avoiding page breaks
Orphans and widows
Establishing a page size with @page
Setting @page margins with :left, :right, and :first pseudo-classes
Using margin at-rules
Future of CSS print style sheets
Example: styling a résumé
Summary
Chapter 5: DEVELOPING FOR SMALL SCREENS AND THE MOBILE WEB
The arrival of the mobile Web
The limitations and challenges of mobile web development
Reduced and unpredictable screen sizes
Varied interaction paradigms and usability implications
Reduced technology options and limited technical capabilities
Limited bandwidth and higher latency
Competing, overlapping, and incompatible technologies
A brief history of mobile web technology
A brief overview of mobile browsers
Opera Mobile and Opera Mini (Presto)
Internet Explorer Mobile
Blazer (NetFront)
Openwave Mobile Browser
Fennec (Gecko)
Mobile Safari and Android (WebKit)11
Comparing browsers and displays
Delivering mobile style
The handheld media type
Formatting a page for handheld media
Establishing color and typography
Designing for Mobile WebKit
Why optimize for WebKit?
Previewing WebKit pages
Basic layout properties
Setting the viewport
Using media queries
Styling links to be touch-friendly
Using CSS selectors in JavaScript
WebKit CSS transforms and transitions
Summary
Chapter 6: MANAGING AND ORGANIZING STYLE SHEETS
The need for organization
What organization looks like
Using CSS features as architecture
Understanding specificity
Applying multiple style sheets to a page
The grand order of at-rules
Classical inheritance schemes for style sheets
Defining design relationships using selector groups
Good coding principles
Taking advantage of inheritance
Organizing from broad to specific
Avoid overusing arbitrary <div> elements, IDs, or classes
Dividing style sheets into logical sections
Dividing design principles into files
Use the shortest URL that works
Good code formatting conventions
Alphabetize your declarations
Consistency is your ally
Techniques for intra-team communication
CSS comments
Comment headers
Comment signposts
CSSEdit
TextMate
Persistent, preferred, and alternate style sheets
Styling for media
CSS3 media queries
Developing a mobile strategy
Summary
Part 3: CSS PATTERNS AND ADVANCED TECHNIQUES
Chapter 7: SEMANTIC PATTERNS FOR STYLING COMMON DESIGN COMPONENTS
Markup patterns and common authoring conventions
The evolution of markup conventions
Microformats: reusing markup patterns and adding semantics
How microformats work
RDFa: adding extensible vocabularies to semantic markup
Opportunities and benefits of semantics for CSS developers
Styling microformats with CSS
Styling rel-tag links
Styling an hCard
Styling an hCalendar
Styling RDFa with CSS
Summary
Chapter 8: USING A STYLE SHEET LIBRARY
Leveling the playing field: “resetting CSS”
Designing to the grid
Tools for grid diagnostics
CSS frameworks
YUI CSS Foundation
960 Grid System
Blueprint CSS
Summary
Chapter 9: STYLING XML WITH CSS
Using XML for your markup
Problems with POSH
Freedom from HTML
Oh yeah? Well, XML sucks!
Double the style sheet fun
CSS vs. XSL
Styling a simple XML file
Linking a style sheet
Embedding a style sheet
Putting the X back in eXtensible
Extending XHTML through namespaces
Styling namespaces
Styling namespaces in Internet Explorer
Painting SVGs
SVG and CSS2
SVG-specific style
Browser support for SVG
Making an Atom feed more presentable
An integrated example
Summary
Chapter 10: OPTIMIZING CSS FOR PERFORMANCE
Why optimize?
Optimize to increase speed
Optimize to lower bandwidth usage and costs
Optimization vs. organization
Optimization techniques
Optimizing with CSS shorthand, selector groups, and inheritance
Avoid universal selectors or lengthy descendant selectors
Put CSS at the top
Prefer <link> elements over @import rules
Compressing, combining, and minifying style sheets
Avoid CSS expressions and filters
Reference external CSS instead of inline styles
Use absolute or fixed positioning on animated elements
Diagnostic tools for CSS performance
The Firebug Net panel
YSlow Firebug plug-in
WebKit Web Inspector network timeline
Reflow and repaint timers and visualizers
Summary
Part 4: THE FUTURE OF CSS
Chapter 11: EXPLORING THE EMERGENCE OF CSS3
When will it be done?
Using CSS3 today
Using vendor extensions and “beta” features
Browser support
Opera (Presto)
Safari (WebKit)
Firefox (Gecko)
Internet Explorer (Trident)
Using new CSS3 features
CSS3 color units and opacity
General sibling combinators
CSS3 attribute matching selectors
CSS3 pseudo-classes
E:root
E:nth-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:last-child
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty
E:target
E:enabled, E:disabled, and E:checked
E::selection
E:not(s)
Typographic effects and web fonts
Word wrap
Text shadow
Web fonts
Border and background effects
Rounded corners
Box shadow
Multiple backgrounds
Background image resizing
Animations, transitions, and transforms
Transitions
Transforms
Animation
Summary
Chapter 12: THE FUTURE OF CSS AND THE WEB
The bright future of the Web
Expanding CSS in print
Audible CSS
HTML5 and CSS
Influences, tensions, and competitors to CSS
Keeping up-to-date = getting involved
Participating in the W3C
The Web Standards Project
Exchanging ideas
Summary
Index
Search in book...
Toggle Font Controls
Playlists
Add To
Create new playlist
Name your new playlist
Playlist description (optional)
Cancel
Create playlist
Sign In
Email address
Password
Forgot Password?
Create account
Login
or
Continue with Facebook
Continue with Google
Sign Up
Full Name
Email address
Confirm Email Address
Password
Login
Create account
or
Continue with Facebook
Continue with Google
Prev
Previous Chapter
Cover Page
Next
Next Chapter
Copyright
Add Highlight
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click
here
login for view all page.
Day Mode
Cloud Mode
Night Mode
Reset