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
Related
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
Since about a year the multicolumn css3 property matured enjoying support from many browsers. Reason to finally implement it on your website for better design and readability. I thought let's push the envelope and adopt the ancient-but-ever-so-beautiful Drop Caps (=first large initial letter) into the multicolumn. However, certain screen widths break the multicolumn layout in FireFox. What am I doing wrong?
see jsfiddle DEMO
When resizing the window width, you can see the jumping/breaking of the layout in action in IE and Firefox. Below an example. Stuck on whats causing the defects in the multicolumn miss-alignments!?
Sorry for my beardy alter ego selfportrait: I forgot to shave, was staring all day at this problem with no time to tidy up. I promise you though a clean neat shaved portrait back here once this issue is solved!
Above more alignment problems in most screen widths on Internet Explorer 11. Curious Safari and Chrome show the layout faultlessly at all browser screen widths no breakage there.
#multicolumn {
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-gap: 53px;
-moz-column-gap: 53px;
-webkit-column-gap: 53px;
column-rule-color: #EEE;
-moz-column-rule-color: #EEE;
-webkit-column-rule-color: #EEE;
column-rule-style: solid;
-moz-column-rule-style: solid;
-webkit-column-rule-style: solid;
column-rule-width: 1px;
-moz-column-rule-width: 1px;
-webkit-column-rule-width: 1px;
}
#multicolumn p:first-letter{
float:left;
font-weight:normal;
font-size:44px;
margin: 7px 1px 0px 0px;
line-height:27px;
background-color:#AEE;
}
First of all I want to say that the use of the multi column layout module is still not recommendable.
Mainly because of the missing support for the break-before , break-after, break-inside properties, with the exception of IE 10+ and the proprietary -webkit-column-break-* properties (see: CSS3 Multiple column layout).
(You also may want to take a look at my answer to this SO question: IE (11) improper handling of CSS multi-columns?)
Additionally you have to remember, that there is a so called "multi-column pseudo-algorithm", which seems to be confused by your :first-letter selector.
You can avoid this problem by using a span element with a class attribute for the drop caps instead.
But as the first letters are larger in size than the rest of the text, there arises another problem.
It may happen that a (single) line of text of the beginning of a paragraph with a drop cap may fit to the previous column, whereas the drop cap (which is about twice as high as the normal text) may not.
To avoid this unwanted behaviour you have to use another span element, which includes at least more text than that may fit into a single line (of text)!
And giving these span elements a display: inline-block; solves this problem.
Just a word about Amir5000 answer: Though my proposed solution also needs some extra span elements, it does not use "purely presentational markup" which may also produce unwanted empty lines.
But as said at the beginning, using multi-column is at least very "tricky" and very difficult to get predicted results across browsers and/ or different viewport widths.
So here is my proposed "solution": DEMO
The cause of the issue was the float:lefton the #multicolumn p:first-letterif you take that out you will see it no longer has that issue; However you don't have the same format you wanted with the first letter. So I created a JSFIDDLE where I added
#multicolumn p {
float: left;
}
and added a width for the #multicolumn container and centered it as you can see.
Hope that resolves the issue for you.
-------Update---------
So after much time trying to get it to flow as intended I was able to come up with a work around that is pretty simple, if you take a look now at the updated FIDDLE
I added an empty span in between paragraphs to clear the float and also added a media query so it looks nicer on smaller screens
This was the simplest way I could come up with to solve your issue hope that helps!!
I am not sure about the the column issue. You should make a fiddle for it so that we can help you faster. As far as the first cap issue. This is pretty tricky, what are your constraints? Can you hardcode it look right or do you have to do it dynamically?
I have posted a hardcoded solution here. It is basically just using
:before
http://jsfiddle.net/emersive/bdAWQ/1/
I have Chenges below css
p { float:left;}
#multicolumn { line-height: 20px; } /*need for IE browser*/
Demos
I like to know if is possible to specify the border drawing style (not border-style) with CSS (I need that works at least on webkit).
Well, I have an element like div.border and it have four-side border 5px silver solid. But depending of class addition, like div.border.red-mark, it will receive a border-left: 15px red solid. I need that the rendering style be rectangular and not adaptative to line width (or angled to a point).
To clarify, take a look at this example. And I need get something like that. But I can't modify the HTML structure, like I did on second example; I really can use only CSS for that.
Is it possible?
You could use CSS pseudo-content to achieve a fake border, like this:
.red-mark:before {
content: '';
display:block;
width: 15px;
position: absolute;
top: -15px;
left: -15px;
bottom: -15px;
background: red;
}
See: http://jsfiddle.net/MnPka/1/
The minus positions are because 0 starts within the border. You may be able to change this behaviour by setting box-sizing though support for that isn't that great yet - http://caniuse.com/#search=box-sizing
The :before solution offered by Josh Davenport is probably the best answer here, but just for completeness, I should also mention border-image.
border-image is a relatively new CSS feature that allows you to specify an image for each of the border edges and corners. This would enable you to design your border exactly as you want it.
Your example would be a pretty trivial case for it; as I said the other answer is probably better for you; but for more complex cases, it's a great little feature to have in your toolbox.
You can read more about it here at the MDN.
The one thing to note (as mentioned on the MDN link above) is browser compatibility. It will work in most current browsers, but not in any current IE versions (IE10 or earlier), and may have issues in older versions of other browsers. However, you specified you were particularly looking for a Webkit solution, and it has been supported in webkit browsers for ages, so it should be okay.
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.
This may be a trivial question to answer, but is there an equivalent to input { border: initial; } that works in IE8 & 9?
I would be fine with nested boxes with explicit borders just to get the default IE look if anyone knows what the colours are (since they can be overridden with initial in other browsers to clear them).
Things I've tried already: 2px inset #XXX with various values for X; 2px inset threedhighlight; -ms-initial
No. And initial doesn’t mean “browser default”. It means the defined initial value for the property, as per CSS specs, irrespective of browser defaults. For border, it is thin none followed by the value of the color property. (The initial value is supported by Chrome, but not e.g. by Firefox or IE 9.)
You can try to explicitly set a property to a value that you expect to be a browser default, though this often varies by browser version. The page http://www.iecss.com is described as showing IE default style sheet features. According to it, the following is applied in IE 6:
background-color: #FFF;
border-style: inset;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
padding: 1px;
zoom: 1;
For IE 7 thru IE 9, the page has the same declarations, except for border-style, which is missing. This is impossible since the initial value is none. Maybe the intent is to say the border style is not describable in CSS. But to me, it really looks inset.
To keep some properties of some elements to their browser defaults, just don’t set them in CSS. Use selectors that exclude them when needed. This may require added markup at times.