KNOWLEDGE BASE
Log In    |    Knowledge Base    |    4D Home
Tech Tip: Proprietary browser CSS tags
PRODUCT: 4D Web 2.0 Pack | VERSION: 12.1 | PLATFORM: Mac & Win
Published On: February 24, 2011

New CSS tags that are not a part of a standard are often supported as proprietary browser CSS tags. This includes tags like text shadow, rounded corners, and number of columns. Tag prefixes most often correspond with the supporting browser: -moz for Mozilla and Firefox, -webkit for Safari and Webkit.

There's no harm in using proprietaty tags, especially if they are supported in most browsers, as long as the styled element will degrade gracefully. For example, if text shadow is not supported by the browser, the CSS style for it will be ignored, and the developer must make sure that text is still readable.

For example, this CSS style will add rounded red corners to the box. Note that proprietary CSS tags are included for Webkit and Mozilla, as well as tag name with no prefixes that will eventually be adopted by all browsers. This way styling is protected for backward and future compatilibility.

.red_box {
width: 16px;
height: 16px;
border: 1px solid red;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}