Advanced CSS Techniques - Jonkinney PDF Free Download

1y ago

34 Views

1 Downloads

5.02 MB

29 Pages

Report/dmca

Download PDF

Transcription

Advanced CSS TechniquesPresenter: Jon KinneyEmail: jonkinney@gmail.com

OverviewBrief history of CSS (How did we get here)Quirks Mode -VS- Strict ModeDoctypes, and the Box ModelHacking CSS support for IEThe future of CSS (Table layouts done right)CSS FrameworksAdvanced Tips and Tricks

HistoryCSS wasn’t originally intended for layout. IE3Look at a typical site and identify the gridWhat was the easiest way to make the gridwork?. Tables. so what’s the problem?HTML Tables are intended for the display ofspreadsheet-like tables of data.Designers stick the blocks of their pagesinto table cells, forming the two-dimensionalgrids they craved.

History cont.Over time CSS support improved and when IE5 wasreleased some bold developers created ways toachieve CSS layouts without the use of tables.IE 6 released in August 2001 further improvingstandards compliance which allowed for even morecomplex CSS layouts, and then. nothing.IE development stopped for almost 4 years. IE 7 betareleased July 2005.Internet Explorer 7 was finally released to the publicon October 18, 2007 (over 6 years after IE 6)

Quirks Mode -VS- Strict ModeWhat is quirks mode and why does it lA browser feature that was implemented forIE6 and later browsers to continue renderingold sites according to the quirks (originalproprietary) rules, if so desired. Note: IE 5and earlier browsers are permanently lockedin quirks mode.Standards mode allows developers who “knowwhat they are doing” to force the browserto be more standards compliant. How?

Doctypes, and the Box ModelXHTML 1.0 Transitional (allows target) and forces thebrowser to render in almost strict or “A” mode.Detect your mode (http://www.snippetstash.com/public/126)Box Model www.guistuff.com/css/css boxmodel.html

Complication: almost strict mode*Images had bottom margin (not removable)In strict mode img / is an inline element, which means thatsome space should be reserved for possible descendercharacters like the letters g, j, or q. Of course an imagedoesn’t have descender characters, so the space was neverused, but it still had to be reserved.The solution was to explicitly declare images block levelelements: img {display: block}.Nonetheless browser vendors, Mozilla especially, thought thiswas such a confusing situation that they introduced "almoststrict mode". This was defined as strict mode, but with imagescontinuing to be blocks, and not inline elements.Most common doctypes, trigger almost strict mode. Thetreatment of images is by far the most important differencebetween almost strict mode and really strict mode.http://hsivonen.iki.fi/doctype/

Hacking CSS support for IECSS ResetsEric /reset-reloaded/)Yahoo CSS ResetReproduce /css.tests.free.fr/en/debugging css msie.php)Hacks & Conditional er/

The Future of CSSA new era - IE 8When IE 8 arrives we will finally have allmajor browsers supporting standardscompliance according to the CSS2.1 spec.IE 8 passes the Acid2 e/One of the major features?CSS Tables for easy layout! (demo later)

CSS FrameworksWhat is it? - a predefined set of html andcss that gives the user a grid upon which toplace items for layout.Some popular flavors.960 Grid System (http://960.gs/)Blueprint (http://www.blueprintcss.org/)Elements (http://elements.projectdesigns.org/)

Advanced Tips & TricksTools of the tradeIntro tipsPixels VS EMPositioning info2 Column floated layoutFooter stuck to the bottom of a pageStyling forms and buttons

Tools of the tradeA Virtual Machine (I prefer Windows XP still)IE Tester Firebug - inspect mode is really convenientFirefox plugin - Web Developer ancss.com/http://colorschemedesigner.com/TIP! : Keep your CSS Neat and Alphabetized- http://alphabetizer.flap.tv/index.php

Intro TipsDifferent ways to target elements(depends on where the indicator is specified)a.class name (can have multiple classes)ul#ul id name li (rarely used)#ul id name li (one ID per page)

Pixels VS EM(who what where when why to resize)My friend Brian is partially blind and he saysuse Px not EM. people will resize with thecomputer not the browserWhat is an em? Classically, an em (pronounced emm) isa typographer’s unit of horizontal spacing and is asliding (relative) measure. One em is a distance equalto the text size. In 10 pixel type, an em is 10 pixels;in 18 pixel type it is 18 pixels. Thus 1em of padding isproportionately the same in any text size.http://www.clagnut.com/blog/348/

PositioningNormal flow is the default scheme used forpositioning. It applies to any element thatdoes not specify position:absolute or fixedand is not floated.In this scheme, block boxes flow verticallystarting at the top of their containing blockwith each placed directly below thepreceding one. Inline boxes flow horizontallyfrom left to right.

You should note that vertical margins arecollapsed in the normal flow. That is, insteadof adding the bottom margin of a box to thetop margin of the one immediately below it,only the larger of the two values is used, asillustrated lt.asp

2 Column Floated LayoutRequirementsExplicit widths of each columnOne of the 2 column’s background’s needsto be a solid color

Footer Stick!Define all heights as 100% up through“body” and “html” for container elements.Have a footer outside the “container”Define a “push” areaMake sure the heights and negative marginsare the same.Advanced tip. show full expanding headerand footer

Styling FormsMake the large and consistent across a largeset of applying-css-to-forms/Border: http://www.tizag.com/cssT/border.php

Styling ButtonsIcon set from element/

CSS MenusDrop ntal/Horizontal expandinghttp://green-beast.com/experiments/css menu descriptions.php

IE 8 CSS TablesCheckout sitepoint.com and look for“Everything you know about CSS is wrong”Demo

General Web InfoGeneral Web Design als/9-essential-principles-for-good-web-design/Web Safe Fonts.htmlConvert to Image first for safe display on the web(http://www.fonts500.com/)Useful resourcesCSS/Design - http://www.alistapart.com/General Web Development - http://sitepoint.comMost complete CSS resource - s.shtml

Advanced CSS Techniques Presenter: Jon Kinney Email: jonkinney@gmail.com. Overview Brief history of CSS (How did we get here) Quirks Mode -VS- Strict Mode Doctypes, and the Box Model Hacking CSS support for IE The future of CSS (Table layouts done right) CSS