Log In
Or create an account ->
Imperial Library
Home
About
News
Upload
Forum
Help
Login/SignUp
Index
Imprint
About Smashing Magazine
About Smashing Media GmbH
About this eBook
Table of Contents
Backgrounds In CSS: Everything You Need To Know
Working With Backgrounds in CSS 2
OVERVIEW
BASIC PROPERTIES
Common Uses Of Backgrounds
FAUX COLUMNS
TEXT REPLACEMENT
EASIER BULLET POINTS
Backgrounds in CSS 3
MULTIPLE BACKGROUND IMAGES
NEW PROPERTY: BACKGROUND CLIP
NEW PROPERTY: BACKGROUND ORIGIN
NEW PROPERTY: BACKGROUND SIZE
NEW PROPERTY: BACKGROUND BREAK
CHANGES TO BACKGROUND COLOR
CHANGES TO BACKGROUND REPEAT
CHANGES TO BACKGROUND ATTACHMENT
Conclusion
The Mystery Of The CSS Float Property
Definition and Syntax
SYNTAX
SPECIFICS ON FLOATED ELEMENTS
Float in Practice
Clearing Floats
Fixing the Collapsed Parent
SOLUTION 1: FLOAT THE CONTAINER
SOLUTION 2: ADDING EXTRA MARKUP
SOLUTION 3: THE :AFTER PSEUDO-ELEMENT
SOLUTION 4: THE OVERFLOW PROPERTY
Float-Related Bugs in Internet Explorer
The Mystery Of The CSS Float Property - Part II
Changing the Float Property with JavaScript
Practical Uses for Float
2-COLUMN, FIXED-WIDTH LAYOUT
3-COLUMN, EQUAL-HEIGHT LAYOUT
FLOATED IMAGE WITH CAPTION
HORIZONTAL NAVIGATION WITH UNORDERED LISTS
GRID-BASED PHOTO GALLERIES
ALIGNING AN <INPUT> FIELD WITH A BUTTON
Conclusion
The Z-Index CSS Property: A Comprehensive Look
What is it?
3-DIMENSIONAL REPRESENTATION OF THE Z AXIS:
The Natural Stacking Order
Why Does it Cause Confusion?
Syntax
JavaScript Usage
Improper Implementations in IE and Firefox
<SELECT> ELEMENTS IN IE6
POSITIONED PARENTS IN IE6/7
NEGATIVE VALUES IN FIREFOX 2
Showcase of Various Usage
OVERLAPPING TABBED NAVIGATION
CSS TOOLTIPS
LIGHT BOX
DROP-DOWN MENUS
PHOTO GALLERY EFFECTS
The Z-Index CSS Property: A Comprehensive Look - Part II
CSS EXPERIMENTS BY STU NICHOLLS
LAYERED LAYOUT ENHANCEMENTS
FANCY SOCIAL BOOKMARKING BOX
PERFECT FULL PAGE BACKGROUND IMAGE
Conclusion
CSS Sprites: Useful Techniques, Or Potential Nuisance?
Browsers Cache All Images
Time Spent Slicing a Design Will Increase
Time Spent Coding and Maintaining Will Increase
DO SPRITES REALLY REQUIRE “MAINTENANCE”?
Not Everything Should Be a Background
IMPROPER USE OF SPRITES AFFECTS ACCESSIBILITY
What About HTTP Requests?
What About Sprite Generators?
Focus Should be on Multiple Performance Issues
Conclusion
Modern CSS Layouts: The Essential Characteristics
Progressive Enhancement
Adaptive to Diverse Users
Modular
Efficient
Rich Typography
Summary
Modern CSS Layouts, Part 2: The Essential Techniques
CSS3
CSS3 VISUAL EFFECTS
CSS3 USABILITY / READABILITY ENHANCEMENTS
HTML5
NEW STRUCTURAL MARKUP
REDUCING JAVASCRIPT AND PLUG-IN DEPENDENCE
IE Filtering
Flexible Layouts
Layout Grids
Efficient CSS Development Practices
CSS FRAMEWORKS
OBJECT-ORIENTED CSS (OOCSS)
CSS GENERATION
CSS COMPRESSION
CSS SPRITES
Font Embedding and Replacement
THE @FONT-FACE RULE
OTHER FONT EMBEDDING AND REPLACEMENT TECHNIQUES
Conclusion
Writing CSS For Others
A New Way of Thinking
Comments Are King!
Multi-Line CSS
Ordering CSS Properties
Ordering CSS Files
THE “SHARED” SECTION
MULTIPLE CSS FILES FOR SECTIONS, OR ONE BIG FILE WITH ALL SECTIONS?
Learning From Programmers
Code Should Take Care Of Itself
INTERNATIONALIZE YOUR SELECTORS
LET THE CODE DO THE HEAVY LIFTING
BE PRE-EMPTIVE, THINK ABOUT EDGE CASES
Addendum
That’s It
Decoupling HTML From CSS
Exploring Approaches
Reusing Styles
Reducing The Depth Of Applicability
CHILD SELECTORS
Classifying Code
CLARIFYING INTENT
It’s All Coming Undone
POSTSCRIPT
CSS Specificity And Inheritance
1. Importance
2. Specificity
2.1 HOW TO CALCULATE SPECIFICITY?
2.2 MAKING SPECIFICITY WORK FOR YOU
3. Inheritance
3.1 OBJECT-ORIENTED PROGRAMMING INHERITANCE
3.2 HOW INHERITANCE WORKS
In other words:
3.3 USING INHERITANCE
4. Using Your Tools
5. Conclusion
Equal Height Column Layouts With Borders And Negative Margins In CSS
1. Centering columns without a wrapper div
THE BASICS
THE MARKUP
THE CSS
2. Creating a 2-col-layout with two borders in between the columns
THE BASICS
MARKUP
CSS
3. Creating a three column layout with a border in between the columns
THE BASICS
THE MARKUP
CSS
WHAT’S NEXT?
ADDING VERTICAL BORDERS
THE CSS
Things to consider
!important CSS Declarations: How And When To Use Them
A Brief Primer on the Cascade
Syntax and Description
When Should !important Be Used?
NEVER
TO AID OR TEST ACCESSIBILITY
TO TEMPORARILY FIX AN URGENT PROBLEM
TO OVERRIDE STYLES WITHIN FIREBUG OR ANOTHER DEVELOPER TOOL
TO OVERRIDE INLINE STYLES IN USER-GENERATED CONTENT
FOR PRINT STYLESHEETS
FOR UNIQUELY-DESIGNED BLOG POSTS
Conclusion
CSS Sprites Revisited
The Problem With CSS Sprites
Preparing The Sprite
Preparing The Sprite: A Photoshop Bonus
LESS And Sass To The Rescue
Common CSS Sprite Use Cases
1. REPLACED TEXT
2. INLINE IMAGES
3. PADDED IMAGES
The Ideal Sprite
Learning To Use The :before And :after Pseudo-Elements In CSS
What Does A Pseudo-Element Do?
Basic Syntax
SOME NOTES ON THE SYNTAX
Characteristics Of Inserted Content
Before Or After What?
Inserting Non-Text Content
Dreaded Browser Support
PSEUDO-ELEMENTS AREN’T CRITICAL
A Couple Of Reminders
Taming Advanced CSS Selectors
CSS Specificity
1. Attribute selectors
2. Child selector
3. Sibling combinators
ADJACENT SIBLING COMBINATOR
GENERAL SIBLING COMBINATOR
4. Pseudo-classes
DYNAMIC PSEUDO-CLASSES
:FIRST-CHILD
THE LANGUAGE PSEUDO-CLASS
5. CSS 3 Pseudo-classes
:TARGET
THE UI ELEMENT STATES PSEUDO-CLASSES
6. CSS 3 structural pseudo-classes
:NTH-CHILD
:NTH-LAST-CHILD
:NTH-OF-TYPE
:NTH-LAST-OF-TYPE
:LAST-CHILD
:FIRST-OF-TYPE AND :LAST-OF-TYPE
:ONLY-CHILD
:ONLY-OF-TYPE
:EMPTY
7. The negation pseudo-class
8. Pseudo-elements
::FIRST-LINE
::FIRST-LETTER
::BEFORE AND ::AFTER
Conclusion
Six CSS Layout Features To Look Forward To
Generated Content For Paged Media
API
Multiple Columns
Regions
API
GETNAMEDFLOW
Exclusions
Grid
Flexbox
How Do Various Properties Interact With Each Other?
A NOTE BEFORE YOU RUSH OUT TO USE THEM IN CLIENT PROJECTS
Help The Working Group!
About The Authors
Divya Manian
Harry Roberts
Inayaili de Leon
Jonathan Snook
Louis Lazaris
Michael Martin
Niels Matthijs
Thierry Koblentz
Zoe Mickley Gillenwater
← Prev
Back
Next →
← Prev
Back
Next →