jquery UI's css file

Question

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.

CheckRaise · Accepted Answer · 2011-09-21 20:28:04Z

3

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

answered Sep 21, 2011 at 20:28

CheckRaise

5502 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JNDPNT · Accepted Answer · 2011-09-21 20:27:19Z

3

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

answered Sep 21, 2011 at 20:27

JNDPNT

7,4752 gold badges37 silver badges40 bronze badges

Comments

Snicksie · Accepted Answer · 2011-09-21 20:26:01Z

1

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

answered Sep 21, 2011 at 20:26

Snicksie

1,99717 silver badges27 bronze badges

Comments

Andersson Melo · Accepted Answer · 2011-09-21 20:31:47Z

0

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/

answered Sep 21, 2011 at 20:31

Andersson Melo

7641 gold badge13 silver badges32 bronze badges

Comments

Dennis · Accepted Answer · 2011-09-21 20:34:37Z

0

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.

edited Sep 21, 2011 at 20:34

answered Sep 21, 2011 at 20:29

Dennis

32.7k12 gold badges66 silver badges79 bronze badges

Collectives™ on Stack Overflow

jquery UI's css file

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related