“css hacks”

Click here to load reader

Download “CSS Hacks”

Post on 24-Feb-2016




1 download

Embed Size (px)


“CSS Hacks”. Or Kung fu. Jeff Schinella Web Guy CCV [email protected] Twitter: No thank you. Why We Need Them. Why We Need Them. Why We Need Them. Examples. Examples. More !important than yo mama!. Examples. text-indent, you can eat your cake. Examples. - PowerPoint PPT Presentation


CSS Hacks

CSS HacksOr Kung fuJeff SchinellaWeb GuyCCV

[email protected]: No thank you#RefreshCache1Why We Need Them

Developers working with outside web designers. multiple coders building Class names/code not standardized. Browsers dont play niceWe wan visual consistency2Why We Need Them

Web forms can add unpredictable code3Why We Need Them

The Spam/span tagClass names and mark up arent always under our control.CSS(2) doesnt quite do what we want it to ALL of the time.

4ExamplesExamplesMore !important than yo mama!

Overrides inline styles!Just watch over-usecan lead to css superiority complex.Apply to items with specific class/id, not global selectors. IE6 ignores, if you care.6Examplestext-indent, you can eat your cake.

Perfect for block elements using background image as graphic in restricted environments. Plugins, Facebook API, etc.E.g. pagination links7Examplesfloat your boat.

Covers most browsers.Use on global module class8ExamplesHave a global class for modules and other repeatable content types.

Global class with default properties. (float clearing, etc) Does the work up front.Time saver for rapid prototypingyou dont want to waste time when you developing your functionality, thats my job.9Examples

Remove the browser rendering discrepancies. Reset.cssErik Meyer, Blueprint, Base CSS10Examples

Padding/margin reset, default line height, other global elements.11Examples

All in the family, Sibling & Child selectorsAll In The Family Siblings and children12Examples

All In The Family Siblings and childrenChild combinatorAdjacent Sibling

13ExamplesWhen all else fails targeting browsers IE.


Common use Attribute Selectors

input[type=text] { padding: 3px; } input[type=radio] { float: left; }15Examples


16Questions & Discussion17