How do I find the version of CSS that I am using?
Although the CSS specification is defined in several versions (v2, 2.1, 3), the CSS version isn't really relevant to the developer; you need to be more concerned with which web browsers support a given feature.
It is useful to know that a given feature was defined in CSS2, 2.1 or 3 because that can give you an idea of how old the feature is, and therefore how likely it is that browsers will support it -- for example border-radius is a CSS3 feature, so browsers more than a couple of years old may not support it fully.
You can find out what CSS features are supported in which browsers from the following sites:
http://www.quirksmode.org/css/contents.html
http://caniuse.com/
The version is only defined by the CSS selectors, propreties and attributes that you use.
You are free to mix elements of CSS 1, 2 and 3 in any styles that you write.
You can refer to the CSS specifications to see more details. The specifications and drafts at the W3C is available via this index: http://www.w3schools.com/w3c/w3c_css.asp
Just an addition of what #Craig said.
In my .net 2.0 framework I have a property to show scroll bars. As I want just the vertical, I've added both properties and, if the browser that user is using support this new CSS 3.0 property (overflow-x), he will see just the vertical one.
In my opinion you should use object detection instead - check the MDC to understand the principle.
On Internet Explorer you might find compatMode and documentMode useful.
As far as I know, there's nothing in CSS code that specifies the version. Browsers are designed to interpret one or more versions of CSS at runtime. Therefore, I would imagine that you would need to get the version of the browser via javascript and then determine what version of CSS is understood by the browser.
Related
Is there a way find out which version of CSS a browser is using? Most of my end users use their phones, but some don't, and those who don't are amenable to telling me their CSS version if we can figure out what it is. The latest CSS version has elements and styles that will fix some problems I've been having, if I can write code just for it.
All modern browsers support CSS 3. It's been released in 2011.
Despite that, they have differences in support of its features.
Have a look at W3 CSS Browser Support Reference
I encountered this question while browsing the Q&A section of an online course on advanced responsive design. I found an answer for it, shared it, and decided to post it here as well in case anyone else might have the same dillema.
The dillema is that it could be a lot easier for ensuring browser compatibility if we could define a different style for certain browsers that behave differently from most, e.g. Internet Explorer and, in the case of my website at least, Safari.
So how do we go about doing that? Check out my answer below to find out, and feel free to contribute if you think you know a better way to target specific browsers for specific media queries unique to them.
Using caniuse (https://caniuse.com/), look for a specific property that is only supported by the specific browser you want to target. Then, using the #support query, target that browser with the property you've found is unique to it. Then, whatever styling you apply within that query will only apply to the browser(s) that support(s) the property by which you defined the query.
That is, the properties inside the brackets of a #support query are used to define when - for which browsers - the styling inside the curly braces will apply; they do not need to be the same, that is, you do not need to use the same property styled within the curly braces to define the query in the brackets, so you can choose any property that targets the specific browser(s) you want to display the styling for.
Update:
I found this site that seems to provide the solution to targeting specific browsers and browser versions in the caniuse style, sparing you the need to test each property by hand:
http://browserhacks.com/
This article offers a briefing on how to use it:
https://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html
Update:
For Internet Explorer only, older versions only, you can create a separate stylesheet to load for them using conditional comments in your HTML. This can be a copy of your general stylesheet, tweaked to work on old IE versions, but loaded only if those versions are detected, therefore not interfering with display on other browsers. They are not, unfortunately, usable for other browsers. This article explains how to use conditional statements.
https://www.quirksmode.org/css/condcom.html
Update:
The most effective solution to this problem seems to me to be to implement some javascript that detects the browser version and then applies specific styles or even modifies the DOM based on the browser(s) you target.
This explains the principle and some applications nicely:
Is there any equivalent to IE conditional comment for chrome and safari?
This, if rather old, is still a very useful such application:
http://rafael.adm.br/css_browser_selector/
And that's it! The ability to ensure browser compatibility with most any browser!
What is the basic difference between -moz-linear-gradient and -webkit-gradient. I know the changes are in parameters and -moz is meant for mozilla. But why we have different CSS property for Mozilla. What does webkit represents here ?
Most often, though, the extensions are used to release and test
browser features that have been developed in the preparation of W3C
drafts that have not yet reached Candidate Recommendation status—the
extensions allow these new properties to be widely tested before they
become available as standard CSS properties.
http://reference.sitepoint.com/css/vendorspecific
Some of these properties have been included in draft CSS specification
for inclusion in the final recommendation, but are still experimental.
The final standard property may be different from the current prefix
implementation.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions
Webkit CSS properties
http://css-infos.net/properties/webkit
WebKit is an open source web browser engine. WebKit is also the name of the Mac OS X system framework version of the engine that's used by Safari, Dashboard, Mail, and many other OS X applications. WebKit's HTML and JavaScript code began as a branch of the KHTML and KJS libraries from KDE.
CSS3 Gradients
Introduction
WebKit paved the way for gradients in CSS by adding support for -webkit-gradient back in early 2008, and they’ve become widely used since their introduction.
Over the past several months, the CSS Working Group has had extended discussions about making the gradient syntax easier to use, and recently Tab Atkins included a proposal in the latest draft of the Image Values and Replaced Content module. WebKit and Mozilla have now implemented this proposal so that web authors can experiment with it, and provide feedback to the Working Group. Note that the proposal is still an editor’s draft, which means that it’s still possible, and even likely to change due to user feedback.
The main goal of the new syntax is simplicity; it’s now really easy to code up common gradients, as you’ll see in the examples below. A secondary goal was to specify something where implementations were compatible across browsers.
If you’re not already running one, go and grab a recent nightly build so that you can see the examples in this post.
Here are some simple examples (note that all these examples are resizable, so you can see how resizing the box affects the gradients):
I have two issues I have ignored so far, but I will really appreciate some light shed onto them.
First: how can I solve differences between Safari, Chrome and Firefox and the various tags that their engines render differently? Should I just write down the right attribute for each in the same css rule? Is there no better way?
Is there a way to separate the CSS sheets for these browsers as I am doing for IE? Is this recommended?
Second: What about CSS3 attributes? Should I just write them again in the same rule after the CSS2 attributes?
Will this cause problems validating the CSS with WC3?
Welcome :)
If you start without the prefixes, you should write the code, generally, with all the semantically appropriate tags, first.
Then, you can decide what your goals are.
If you want W3C compliant CSS files, then you'd need to strip out the vendor specific prefixes by default. This would then allow the latest browsers to pick up the standardised CSS properties if they support them.
This will target less of your market than you might wish, so then you should ask if progressive enhancement is a possibility. If you can reasonably enhance the visuals by using css applied after the page has loaded, such as applying styles with jQuery, MooTools or Prototype libraries AND these libraries are already serving a purpose in your website, then you could apply additional styles with those libraries (and possibly use them in conjunction with Modernizr to determine which elements you may want to additionally support.
However, it's likely that a browser will skip a property it doesn't understand and will render the ones that it does, so I'd suggest that if you code it to W3C Standards first and then add in your additional vendor prefixes 'before' the final (correct) one, then you'll likely have satisfied reasonable measures to be compliant and meet design needs.
Edit:
There is a little bit of confusion between validation results from:
http://validator.w3.org/
and writing valid code related to vendor prefixes to get CSS effects cross-browser:
List of CSS vendor prefixes?
for working on some cross-browser CSS, you might find http://csspie.com, for IE compatibility with some CSS3 properties, useful along with http://www.colorzilla.com/gradient-editor/ for cross-browser gradients and http://cssplease.com for code that gives you alternative vendor prefixes, including different versions of IE support for many different properties.
In terms of validation, here's what W3C says about it: (see comments here: W3 VALID cross browser css gradient,) and official docs here: http://www.w3.org/TR/css3-syntax/#vendor-specific
If you code according to the specifications first and test your code out against that and then add in your vendor prefixes to get the same effects on the browsers you want to support (see progressive enhancement: What is Progressive Enhancement?) then you can be more confident that your code is supporting the appropriate standards, adding value to those with more advanced browsers and still useful for those without additional features (see also WAI III compliance, 508 compliance and others if you want to write a more inclusive site).
Caveat: Web Apps may not always be inclusive or follow these guidelines depending on who the audience is.
If you are using jquery on the site you may want to look into PrefixFree. It's a script that adds the vendor prefixes for you, so for example your put border-radius:6px; in yor css and it reads the browser and adds the appropriate vendor prefix for you via js. I like it cause it keeps my css docs more readable.
Should we use IE's CSS Dynamic properties?
I read IE8+ would not support these.
What is the best strategy to handle this?
If you mean CSS expressions, you should avoid them because they're slow.
Your question about how to avoid them is pretty vague. It would be easier to answer a more specific question. But here's a vague answer: Javascript. :)
They are very useful to solve incompatibility problems with older versions of IE, for example to get png transparency in IE6. I always (when needed...) include style-sheets using these functionalities in IE's conditional comments.
The dynamic properties wasn't anything that really took off. It could be used in applications that targeted IE only (i.e. intranets and such), but as it never became a standard and no other browser supports it, it never came into wide use on the web.
I haven't read what you say about IE8 not supporting dynamic properties, and I haven't tried it, but it sounds very plausible that the will not be supported when the browser renders a page in standards compliant mode. They will probably be supported in quirks mode for a few versions longer.