CODEWITHSUNDEEP
cssjquery-ui
Joseph
Joseph

Reputation: 189

jquery UI's css file

I have started to read through the documentation on the jquery UI plugin (themeroller). Since these plugins are further and further abstracting web design, I wanted to make sure that I understand basically what jquery is doing behind the scene.

I am now using the Dialoge box example and I found that it used the following css code:

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { 
   -moz-border-radius-topleft: 4px; 
   -webkit-border-top-left-radius: 4px; 
   -khtml-border-top-left-radius: 4px; 
   border-top-left-radius: 4px; 
}

I do not recognize the -moz, -webkit etc css styles. Can someone explain to me what all of these styles are? I tried googleing them and came up blank.

Upvotes: 3

Views: 141

Answers (5)

Dennis
Dennis

Reputation: 32598

Browsers have been implementing their own extensions to CSS since before HTML5 (or more accurately CSS3, in this case) became popular but they often implemented in slightly different ways. To avoid conflicting with other browsers Firefox prefixes their "proprietary" extensions with -moz, Webkit with -webkit and so on.

Here is the MDN documentation. You can't google for it exactly because it is prefixed with a hyphen and that will exclude results. moz-border-radius-topleft will be more helpful.

Upvotes: 0

Andersson Melo
Andersson Melo

Reputation: 764

The implementation of this properties is different for each browsers.

Prefixing the name of this properties makes the style compatible with Firefox (-moz), chrome (-webkit) etc...

http://www.css3.info/preview/rounded-border/

Upvotes: 0

CheckRaise
CheckRaise

Reputation: 550

They are vendor specific css settings. Typically when css rules have not been fully adopted by all browsers, manufacturers add support for the styles by prefixing their name before the style.

-ms-    Microsoft
mso-    Microsoft Office
-moz-   Mozilla Foundation (Gecko-based browsers)
-o- Opera Software
-atsc-  Advanced Television Standards Committee
-wap-   The WAP Forum
-webkit-    Safari (and other WebKit-based browsers)
-khtml- Konqueror browser

http://reference.sitepoint.com/css/vendorspecific

Upvotes: 3

JNDPNT
JNDPNT

Reputation: 7465

These are for backwards compatibility with older browsers back in the old days (not long ago) when browsers could not understand the border-radius css property. These specific terms enables the corresponding browser to understand and apply the style after all. Basically: this is for older browsers

Upvotes: 3

Snicksie
Snicksie

Reputation: 1997

All these things basically set the same style but for different browsers.

Upvotes: 1

Related Questions