!doctype html> Chuck Howard's HTML5 & CSS3 - References & Examples

Chuck Howard's HTML5 & CSS3 - References & Examples

Graceful Degradation, Progressive Enhancement & Regressive Enhancement in a Nutshell

Graceful degradation is the practice of building an application for modern browsers while ensuring it remains functional in older browsers.

Progressive enhancement is the practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it. Examples are the -moz and -webkit prefixes for browser specific CSS Properties, such as:
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

Regressive Enhancement is a technique (also known as PolyfillPolyfill:
(n) 1. A shim that mimics a future API, providing fallbaock functionality to older browsers.
(n) 2. A piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively.
(n) 3. A form of Regressive Enhancement.
)that means you go ahead and use the new features, then use JavaScript to emulate native behavior in older browsers. So, instead of using a script to give you drop shadows on all browsers, you just write your CSS with the box-shadow property, and then include a script that transparently takes that property and uses the values you specify to create a drop shadow in JavaScript.

Confused?... Ok - When you hear "Graceful Degradation," think... "Escalator - (IE6)."
When an Escalator degrades (stops working), it becomes a stairway!
Although not working as intended, the 'stairway' feature of a stopped escalator is still funtional.
Unless of course you're an IE6 User! (See how many you can spot!)



When you hear "Progressive Enhancement," think... "Davy Crockett - (Mozilla-Webkit)" -
"Davy Crockett" was the "Ultimate Progressive Enhancement" of the "Bow and Arrow" - The M-29 Davy Crockett Weapon System,
Using a 155mm Recoiless Rifle, a 10-20 ton yield nuclear warhead that resembled a "watermelon with fins", and a Jeep to haul all of it around, this conceptual "Progressive Enhancement" of the bow & arrow became one of the quintessential "Hey y'all, watch this!" moments of the Cold War!
was the name given to the M388 Nuclear Warhead Delivery System.
There was one small problem with the M388 - namely, that pesky "The maximum firing range of the nuclear weapons system was less than the minimum radius of a fatal dosage of radioactive fallout!"


When you hear Regressive Enhancement, think - PolyfillsHTML5 Cross Browser Polyfills
The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks!
, such as Modernizer, Google HTML5Shiv or something like Microsoft's Gradient Filters.

Nicholas Zakas: Progressive Enhancement 2.0 - The best explanation of these concepts! (15MAR2012)

Additional Links on Graceful Degradation, Progressive Enhancement & Regressive Enhancement

Additional HTML5 References

CanIUse.com

Additional CSS3 References

CanIUse.com

CSS3, Image Free Button Examples
Mouseover the Buttons for Different Effects & Code

Additional CSS3 Image-free Button Examples such as:  

Shiney!!

CSS3 Animations using Transitions

Image-Free, Pure CSS3, Gradient Buttons With an Onclick .3Second Transition Effect

CSS3 button

CanIUse.com

CSS3 Tooltips & Speech Bubbles

Web users love informative clues. Whatever questions and misunderstandings might occur - delivering precise answers immediately is the primary task a responsive user interface should be able to cope with. To do that, developers have to consider subtle and well-thought tooltips - used correctly, they can greatly improve user experience and help users to get things done. In Web such "responsive" hints can be provided by tooltips. E.g., unclear input fields in web forms are perfect examples of a situation you might be willing to use a tooltip for.

"Speech Bubble"

"Thought Bubble"

Polygonal Pointers - When a box has no width or height, each border creates the appearance of a triangle.
Giving three of these sides a 'transparent' color value creates the pointing triangles.

Example: Mouseover For Downward Pointing Tooltip!
This is a graphic-free CSS based tooltip that uses the 'Polygonal' CSS border-based pointer.
Example: Mouseover For Left Pointing Tooltip!
This is a graphic-free CSS based tooltip that uses the 'Polygonal' CSS border-based pointer.

This works in all browsers except IE6

There is a IE6 hack that can make this work in that ancient problem browser...
http://acidmartin.wordpress.com

Example: Mouseover For Upward Pointing Tooltip!
This is a graphic-free CSS based tooltip that uses the 'Polygonal' CSS border-based pointer.
Example: Mouseover For Right Pointing Tooltip!
This is a graphic-free CSS based tooltip that uses the 'Polygonal' CSS border-based pointer.

This works in all browsers except IE6

There is a IE6 hack that can make this work in that ancient problem browser...
http://acidmartin.wordpress.com

CSS3 Multi-column Layouts

Multi-column layout is currently only supported in Mozilla based browsers and Safari 3, who have prefixed the properties with respectively -moz- and -webkit-. The examples below uses the CSS3 declarations 'column-count:2;' & 'column-count:3;'.

Bacon ipsum dolor sit amet sirloin tenderloin ut, et est sausage fugiat dolore hamburger. Ut sed deserunt quis, corned beef chicken exercitation beef ribs. Consectetur chuck cupidatat, beef ribs ham non boudin irure tempor. Aliquip qui tongue officia excepteur, pork loin et aute ut. Velit veniam dolore consequat ham strip steak, jerky brisket mollit excepteur ribeye. Pork belly ball tip short loin ullamco pastrami, laborum eiusmod ea cupidatat beef tail biltong beef ribs. Sausage nostrud jerky ball tip. (Text generated courtesy of baconipsum.com)

Bacon ipsum dolor sit amet sirloin tenderloin ut, et est sausage fugiat dolore hamburger. Ut sed deserunt quis, corned beef chicken exercitation beef ribs. Consectetur chuck cupidatat, beef ribs ham non boudin irure tempor. Aliquip qui tongue officia excepteur, pork loin et aute ut. Velit veniam dolore consequat ham strip steak, jerky brisket mollit excepteur ribeye. Pork belly ball tip short loin ullamco pastrami, laborum eiusmod ea cupidatat beef tail biltong beef ribs. Sausage nostrud jerky ball tip. (Text generated courtesy of baconipsum.com)

CanIUse.com

HTML5/CSS3 Form Demo

HTML5 Form Demo
Fancy Forms: HTML5 + CSS3 - JS by Richard Bradshaw
Link goes to the Original Article: Fancy Forms: HTML5 + CSS3 - JS by Richard Bradshaw

If you don't see asterisks or ticks then your browser doesn't support the HTML5 bits we are looking at. Try Chrome Dev builds, Webkit Nightlies or Opera.

The emphasis here has been to showcase the new HTML5 forms module as is supported by Webkit.

CanIUse.com

CSS3 Ribbon Example

Text Goes Here

Responsive Web Design, CSS3 Media Queries, & Grid Layouts

CanIUse.com

Mobile Web Design

Reference Books on UI/UX, HTML5, CSS3, WEB STANDARDS, Etc.







Top of Page