When using vendor prefixes, it’s important to keep in mind the order in which you list rules in your declarations.
I already know how vendor prefixes work and why there are needed, but why is good list the vendor-prefixed property first, and the non-prefixed CSS3 property last? I also checked many important sites and they are using this approach:
.foo {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; //why this is the last one?
}
That's it, why put the actual CSS3 property last? There is a special reason?
With the W3C propriety as last, new versions of browsers use this version instead of the vendor version. In this way your CSS is read as a normal CSS without vendor prefixes.
In this way new browsers will use the W3C version, updated to the latest specs, if supported by browser.
Useful resource is http://taligarsiel.com/Projects/howbrowserswork1.htm and http://www.w3.org/TR/CSS2/grammar.html, maybe you`ll find your answer there.
Here is a good reason: [summary of this post which Andy mentioned]
During the period where browsers support both the vendor prefixes and the actual property - there might be differences in the implementation of the css rule.
Example:
.not-a-square {
/* These do totally different things */
border-radius: 30px 10px;
-webkit-border-radius: 30px 10px;
}
The spec or "real" version will render the top left and bottom right
corners at 30px and the top right and bottom left corners at 10px. The
vendor prefix will render all four corners with elliptical corners
30px wide and 10px tall.
Related
In Firebug, CSS would automatically be converted from longhand into shorthand.
Example:
div {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
padding-right: 0;
}
would then be converted by Firebug into:
div {
padding: 10px 0;
}
However, now when I use Firefox Developer Tools, there is no auto CSS shorthand conversion.
Is it possible to get the new Firefox Developer Tools to automatically convert longhand CSS into shorthand CSS (like how Firebug does)?
No, it's not possible. Firefox Developer Tools displays properties exactly as they are declared in each rule in the stylesheet; in that sense, it doesn't display properties per se, it displays declarations.
If the rule has a padding shorthand declaration, the inspector reflects that shorthand (and allows you to expand that shorthand into its longhands so you can manipulate them individually). If the rule has two of four longhand declarations for padding, the inspector reflects just those two longhands.
This is by design, and prevents the sort of confusion that automatically rewriting longhands into shorthands for the sake of brevity creates (namely, the fact that padding-top: 10px; padding-bottom: 10px is not equivalent to padding: 10px 0).
This is not possible in the Firefox DevTools. It's by design that the DevTools display the property declarations as they were entered. One reason for that is because they indicate which declarations were changed by the user (via a small green line at the left side of the declaration).
Firebug, on the other hand, output what's returned by the CSSRule.cssText API, which outputs a serialization of the CSS rule and turns longhands into shorthands where possible. So, Firebug did the opposite of the Firefox DevTools and always displayed the shortened version of a CSS rule were applicable and there was no way to show them the way they were authored.
So, if you want to get a short version of your CSS rules, you need to call its cssText getter via JavaScript.
I'm creating a website that uses border radius. I found many tutorials that show this example:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
This example shows that I've to specify border radius for all three browser engines.
It appears this info just gets copied around. Is this still true today in August 2015? Do I've to do it or is this just outdated info?
You only need to use border-radius for all modern browsers.
According to
http://caniuse.com/#search=border-radius
https://css-tricks.com/do-we-need-box-shadow-prefixes/
Short answer: No
Modern browsers supports these attributes !
Just use : border-radius: 10px
Compatibility Table
No, you don't need to. Check out the w3scools reference: http://www.w3schools.com/cssref/css3_pr_border-radius.asp
I'm trying to find a resource that has a list of browser specific implementations of CSS properties that deviate from the current W3C standards.
For example, say IE supported something like this:
.my-class {
-ms-foo: fizz buzz;
}
but when the proposal became a candidate reccomendation the standardized equivalent was:
.my-class {
foo: buzz fizz;
}
In order to support versions of IE released before the CR, I'd want to write:
.my-class {
-ms-foo: fizz buzz;
foo: buzz fizz;
}
Googling for a list of these sorts of changes hasn't been terribly fruitful, there's a lot of wailing and gnashing of teeth around vendor prefixes but not a lot of "gotcha" lists. Best I've found thus far are offhand mentions of changes (in that case, -webkit-border-radius), but those rarely document the actual expected input; they tend to just give a broken example.
I have found an OK list of the prefixes that exist (along with their standard status), but unfortunately it doesn't give the kind of details necessary for spotting the changes I'm interested in.
So, do any such lists exist?
I'll take partial lists, or ones that exclude really old browsers (don't really care about IE6, for example). I'm also only really concerned about the big 3.1 browsers (IE, Firefox, Webkit/Chrome/Safari, and Opera).
I also care about things that haven't been addressed by the W3C (like appearance), this is a hard enough problem without worrying about the things vendors have straight-up made up.
I find CSS3Info useful: http://www.css3.info/preview/ (edited - sorry, this is what I meant to post originally).
EDIT: Hmm. I'm batting zero today. I could have sworn there was more on browser prefixes on that site...
There doesn't seem to be an exhaustive list out there, but based on Compass, CSSPrefixer, and this list from Peter Beverloo here's what I can scrape together.
background-clip
-moz-background-clip accepts padding and border instead of padding-box and border-box
-webkit-background-clip behaves the same as the -moz version, but also accepts content instead of content-box
background-origin
-moz and -webkit versions accept the same values as their background-clip equivalents
background-size
-webkit-background-size duplicates single values, so -webkit-background-size: 10px is equivalent to background-size: 10px 10px. The prefixed webkit equivalent of background-size:10px is -webkit-background-size: 10px auto;.
border-radius and friends
The -moz equivalents of border-top-left-radius, border-bottom-left-radius, etc. are -moz-border-radius-topleft, -moz-border-radius-bottomleft and so on.
-webkit-border-radius differs from the final spec in it's handling of the two value shorthand. Webkit treats it as if all the long form versions were passed two values.
More concretely:
-webkit-border-radius: 1px 2px is equivalent to
-webkit-border-top-left-radius: 1px 2px;
-webkit-border-top-right-radius: 1px 2px;
-webkit-border-bottom-left-radius: 1px 2px;
-webkit-border-bottom-right-radius: 1px 2px;
while border-radius: 1px 2px is equivalent to
border-top-left-radius: 1px;
border-top-right-radius: 2px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 2px;
The only work around I know of for this is to expand the two value case of -webkit-border-radius into it's long forms so as to match proper border-radius.
display
If you want diplay:box to work everywhere, you need to use prefixed values like so:
display:-webkit-box;
display:-moz-box;
display:box;
I have no idea why this is, as all the box model specific properties (like box-align) also have prefixed versions in those browsers.
Note that this doesn't include anything that's not currently part of a W3C document, like appearance, even if multiple browsers support it.
Deviations from the standards are not uncommon (i.e. rendering quirks) but deviations from the standard/proposed notation are fairly rare imho, this resource should do the trick:
caniuse.com normally provides good external links in resources section, e.g. for border-radius it linked to -webkit differences and this exhaustive rendering overview
Just trying to give the main content div on a site a border on the left and right side of the div. Rather than have separate divs for each border, I thought to use the border-left-image capability in CSS3 to make it happen. My code is as follows:
#content {
background-color: #7FC3F4;
height: 100%;
width: 900px;
border-left-width: 30px;
border-left-image: url(../images/border_left_gradient.png);
border-right-width: 30px;
border-right-image: url(../images/border_right_gradient.png);
margin-right: 10%;
margin-left: 10%;
}
Of all the Google searches I've done, I have to yet to come up with an explanation as to why this code isn't valid. Some results return numeric values to be placed after the url, however regardless of what combination of numbers I try, no dice.
Thoughts?
border-image is now supported in all the major browsers (2014-05-22)
Demo with a single border-left-image
Demo with different left and right images.
The demos now need a minimum of Chrome 15, Safari 6, Firefox 15, IE 11 or Opera 15.
It is not actually possible to do this with separate image files, but you can slice a single image on the left and right. See the border-image page on MDN which shows some good examples or CSS Tricks for a comprehensive summary of how the other slicing options work.
Note: if you need earlier browser support please ask as a previous version of my answer did work with Chrome 12, Safari 5.0.3, Firefox 4 and Opera 10 but I have updated it now that new browsers support prefix-free CSS3.
Edit: Firefox now requires an additional property setting - border-style: solid (see CSS - New Firefox-release doesn't show Border-Image anymore)
Good solution : Chrome AND Firefox compatibility :
http://jsfiddle.net/Yas34/954/
missing border-style: solid to current "good answer"
For one your url is bogus (..images?). for a second have you checked your browser supports the property? last I checked, which wasn't that long ago, nobody supported it (well maybe webkit nightlies).
how can I make rounded text input fields with css ?
thanks
With CSS3:
/* css 3 */
border-radius:5px;
/* mozilla */
-moz-border-radius:5px;
/* webkit */
-webkit-border-radius:5px;
in modern css3 browsers
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
in older you'll need to use a JS like jquery with rounded corners plugin or Ruzee
Both answers are correct you can either use CSS3 styles (which aren't really supported with the current IEs) or you can use a javascript package such as http://www.malsup.com/jquery/corner/.
There is however another option, which shouldn't be discarded even though it's not exactly ideal. If your inputs are of fixed length you can also draw whatever background (including borders) you want for your inputs into an image and use
background: transparent url(pathToYourImage.png);
border: none;
This has the benefit of working on pretty much all browsers you can think of.
Try something like this: http://hannivoort.org/test/InputRoundedCorners.asp
Maybe you could remove the outlines from the input fields and then with jQuery put them inside a curved box...
^ that last one will work on all browsers.
However some browsers add an outline! Chrome, safari etc.
I know you can turn off the outline in chrome using outline:0, but there is no way that I found where you can turn off the outline in Safari. It will look hideous in it!
Use border-radius use pixels according to your layout.