edmullen dot net

NOTE: This info is outdated with new browser versions adopting CSS3 which includes such capabilities. I leave it here for historical note.

mozilla css3 extensions - Mozilla browsers (SeaMonkey and Firefox) can use various extensions to the CSS standard. Other browsers will ignore them. These extensions fall into the class of CSS3, which is a not-yet-finished standard. Don't adopt these techniques as there is little guarantee any will work on most browsers at this point (March 2010).

Opera and Safari (Webkit-based) browsers have support for some of CSS3 via different extensions.

If you are using Firefox or SeaMonkey you should see the paragraphs below styled with an outline that has rounded corners. If you are using FF 3.5+ or SeaMonkey 2+ you will also see the paragraph drop-shadows. Support for that style began with Gecko version 1.9.1.

The two paragraphs immediately below have this style:

.test {
margin-top: 4em;
margin-bottom: 3em;
padding: 1em .7em .3em .7em;
outline: solid #060 3px;
-moz-outline-radius: 4%;
-moz-border-radius: 4%;
-moz-box-shadow: #262 6px 6px 1em;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


The paragraph immediately below has this style:

.test2 {
margin: 2em;
padding: .7em 3em .3em 3em;
outline: solid #060 3px;
-moz-outline-radius: 4% 4%;
-moz-border-radius: 4% 10%;
-moz-box-shadow: #262 6px 6px 1em;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


CSS3 also includes a specification for automatically creating columns. The following CSS is applied to a <div> to create the columns.

.columns {
-moz-column-width: 20em;
-moz-column-gap: 1em;
-moz-column-rule: 2px solid green;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


references

Mozilla Extensions

Gecko Layout Engine

CSS at Mozilla

W3C CSS

W3C CSS Specs


This page last changed: Monday, October 30, 2017 - 09:39 AM USA Eastern Time

Copyright Ed Mullen | Contact Ed

click for home page