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.

Answer 1

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