• Container 300px
• Container 400px
• Container 500px
• Container 600px
• Container 700px
• Container 800px

Proof of concept

Progressive Enhancement with CSS3

The purpose of this document is to prove that CSS3, despite limited support in Internet Explorer, can be used to enhance web-application interfaces.

This document is a work in progress. This basically means that a lot of stuff here is, at the time of writing, experimental. In due time this page will look acceptable in IE7 and up. Until that time it is advised to use the latest build of Mozilla Firefox to view this page, starting at 3.6.

Contents

• Contents
• Paragraphs
• jQuery UI dialogs
• Lists
• Fieldsets
• Form fields
• Buttons
• Messages
• Tables
• Copyright

Paragraphs

Mauris vehicula turpis in lectus cursus eget congue orci vulputate. Quisque tempor, nibh quis accumsan fringilla, erat neque malesuada turpis, id ultricies ante tellus vitae risus. Cras blandit sollicitudin lectus ac faucibus. Nam vitae sapien vel erat egestas aliquet at eu ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus vestibulum tempus tellus sed consectetur. In sed leo neque, ac egestas erat. In hac habitasse platea dictumst. Nunc consequat augue tristique urna feugiat feugiat. Nunc posuere iaculis congue. Nunc pharetra ante erat, at hendrerit enim.

Mauris vehicula turpis in lectus cursus eget congue orci vulputate. Quisque tempor, nibh quis accumsan fringilla, erat neque malesuada turpis, id ultricies ante tellus vitae risus. Cras blandit sollicitudin lectus ac faucibus. Nam vitae sapien vel erat egestas aliquet at eu ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus vestibulum tempus tellus sed consectetur. In sed leo neque, ac egestas erat. In hac habitasse platea dictumst. Nunc consequat augue tristique urna feugiat feugiat. Nunc posuere iaculis congue. Nunc pharetra ante erat, at hendrerit enim.

jQuery dialogs

jQuery UI dialog windows are demonstrated here.

Lists

• This is a list item
• This is a list item
• This is a list item
• This is a list item
• This is a list item
• This is a list item
• This is a list item

Fieldsets

This is a fieldset with no legend.

Legend title

This is a fieldset with a legend.

Form fields

Form element 1

Form element 2 Option number 1
Option number 2

Form element 3

Form element 4 Option number 1 longer label
Option number 2 longer label
Option number 3 longer label

Buttons

Buttons in paragraphs

This is a demo with inline buttons that are contained in regular paragraph text. The purpose for this type of button would be to show messages that use buttons to make the user perform a certain action. Even though this is obvious, I'm just typing text to fill up space.

Button-tag and input type button

Buttontag Buttontag
Buttontag with longer text
Buttontag with
longer text

Messages

Tables

Regular table

	Header column	Another one	Tables rule
Left header	36%	100%	32 inch	EditDelete
Left header	36%	100%	32 inch	EditDelete
Left header	36%	100%	32 inch	EditDelete
Left header	36%	100%	32 inch	EditDelete
Left header	All that you know is a tiny fraction of all universal knowledge.	There are quite a few questions in life that you will never see answered.	What will happen with text that is larger than the table should be able to contain?	EditDelete
Left header	36%	100%	32 inch	EditDelete
Left header	36%	100%	32 inch	EditDelete
Left header	36%	100%	32 inch	EditDelete
Left header	36%	100%	32 inch	EditDelete

Hover table

	Header column	Another one	Tables rule
Left header	36%	100%	32 inch	EditDelete
Left header	36%	100%	32 inch	EditDelete
Left header	36%	100%	32 inch	EditDelete
Left header	36%	100%	32 inch	EditDelete
Left header	36%	100%	32 inch	EditDelete
Left header	36%	100%	32 inch	EditDelete
Left header	36%	100%	32 inch	EditDelete