Hello friend i would like to know if there is any way to avoid repetition of Firefox compatibility and chrome in CSS3, as we need to enter -moz- and -webkit- repetitively for compatibility. Is it possible to write just once in a page in any way ?
Use prefixfree
-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.
CDN link
Live DEMO on dabblet.com
I'd prefer using autoprefixer respectively the grunt or gulp plugin to generate a css file including prefixes, since I don't like the idea of including an additional library and doing this just in time with JavaScript.
just found on web
js
// For detecting browser prefix and capabilities
var el = document.createElement( 'div' );
var re = /^(Moz|(w|W)ebkit|O|ms)(?=[A-Z])/;
Related
How can i know when to use the prefix -webkit-, -moz-, -ms-, -o- in css properties? I see a lot of "inconsistency" in some attributes, in some properties the programmer only puts -moz-, in the other he puts the all 4. Is there a reason for that?
To know what prefixes to use is based on what browsers you want to support. A good place to find out what browser versions require a prefix is caniuse.com.
The variation is due to what browsers other developers have decided to support. If you see more prefixes then the developers (site owner) of the site have decided on a higher/deeper level of support for older browsers. Fewer prefixes will support fewer browsers. As to why? There could be a lot of reasons some are target audience and feature requirements (Web APIs).
You can go the manual route but a lot of developers will use tools like Autoprefixer or a CSS preprocessor like SASS or LESS. These tools give you different ways of defining what prefixes to use.
With something like AutoPrefixer there's an option to list what browsers you want to support and it figures out what prefixes etc. are required to support those browsers based on the non-prefixed version.
With a CSS preprocessor like SASS or LESS you can create a mixin (basically a function) that will add the prefixes you've defined.
I apply a simple rule of thumb: never put a vendor prefix (let user update their browser instead, and avoid non-official/non-yet-finalized CSS rules).
See http://shouldiprefix.com/ if you still want to know which prefixes are "required" (or "worth worrying about").
Last, CSS preprocessors can handle these, but it's often a useless pain to add to your development and release stack (except if you're using other stuff that vendor prefixes, or if you have to deal with old browsers like in companies intranets).
awesome question.
A lot of Programmers use CanIUse to determine if a particular CSS property is supported in all of the browsers they would like to support. If it's not fully-supported in all of the browsers they wish to support, the programmer should use the vendor prefix (i.e. -webkit-).
Example Scenario
Say the programmer wanted to use the Transform property (CanIUse#Transform). See how Android Browser 4.4 & 4.4.4 have yellow warnings in the top right? Hover over them and notice it says 'Supported with -webkit'? This is exactly. when you would add the -webkit- vendor prefix.
I disagree that you have to add them all (although, it really doesn't hurt anything). If you just do a bit of research before you use newer CSS properties, you will have cleaner CSS/SASS/LESS/etc while supporting all of the browser your heart desires. :P
I do think there are awesome tools out there to do this automatically. Xenos mentioned a few.
Best of luck in your CSS endeavors.
These different properties are termed as "vendor prefixes":
-moz- = used for Mozilla Firefox
-ms- = used for Microsoft Internet Explorer
-o- = used for Opera
-webkit- = used for Google Chrome and Apple Safari browsers.
It's always a good approach to use all the vendor prefixes for the css you're applying, in order to address to the browser compatibility of the webpage you're developing.
However, css preprocessors like LESS can handle this thing, if you happen to use them. I personally use LESS to handle all this vendor prefixing stuff and it's really simple. If I weren't using preprocessors, I would still have considered writing vendor prefix css along with the default property name.
It's always a good thing to keep addressing about the compatibility issues well in advance than to run into some and fixing them later.
Try using vendor prefixer tools like:
https://github.com/less/less-plugin-autoprefix
If you want ensure that will work on each browser you need add all of them, some websites dont support old browsers so there is no need to care about browsers which you decide to not support :)
Here is the solution I found, if you are using Visual studio code go to extension and search for css-auto-prefix
Are there any tools out there that can process a CSS file, inserting -webkit equivalents for styles that aren't 100% supported across the board?
I'm using calc() in my CSS which isn't supported across all browsers. Instead I have to use -webkit-calc() for safari etc.
I'd like a tool that will insert -webkit into the CSS for styles that aren't supported 100% across the board, or to be able to specify the target browsers/versions and have the tool work out whether it needs to be inserted or not. Presumably the tool would have to know what styles were supported in which version of which browsers.
You're looking for -prefix-free.
Are you looking for http://lesscss.org/?
The dynamic stylesheet language.
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
[EDIT]
After answering, i found this website http://prefixr.com/index.php where they use a script to reformat css declarations. Maybe you could study this one.
Just stumbled upon this in a borrowed css file - something I've never noticed before, and punctuation in context is inherently hard to google:
.ez-radio { zoom: 1; *display:inline; _height:15px; }
What's the '*' prefix do?
And for the matter the underscore in _height?
Is this some new CSS3 trickery?
It's used for CSS hacks in Internet Explorer.
* is IE 6 - 7 only (thank you, mck89!)
_ is IE 6 and below.
Don't use them. If you need browser specific CSS definitions, use specialized CSS definitions instead.
Those symbols are used to target IE lower version browsers called it CSS HACKS.
FF, Chrome or Safari always ignored those strings in CSS class.
dont want to duplicate Zanathel's answer, but its important to mention:
please do not use them in your stylesheet, keep it hack-free
when you need to use hacks, dont use hacks, use conditional comments, and place your ie specific css in these files
In Visual Studio 2010, is there a way of changing the Cascading Style sheet on the server-side based on the client browser? I want to create different style sheets for the different browsers (Firefox, Chrome, IE, Opera, Safari etc..) and specify which one to use from the master page.
I agree with KP; use a single stylesheet.
If you are using modernizr [sic], then you can style for different browsers very simply, for example:
someContainer {
/* standards based CSS */
}
someContainer.ie6 {
/* special CSS for IE6 */
}
My suggestion is to use the new HTML5 Boilerplate which includes modernizr. You'll be glad you did!
Check out the links below and don't look back. :)
Link to Boilerplate for HTML5
Link to Modernizr - ease the chaos!
Cheers
Here's a good article on detecting browser type in asp.net:
http://msdn.microsoft.com/en-us/library/3yekbd5b.aspx
Once you detect the browser type using for example, a switch statement on HttpContext.Current.Request.Browser.Type, you can easily insert a css reference into the page, with code such as:
HtmlLink cssLink = new HtmlLink();
cssLink.Attributes["type"] = "text/css";
cssLink.Attributes["rel"] = "stylesheet";
switch(HttpContext.Current.Request.Browser.Type)
{
Case "Firefox":
//use a certain path depending on browser type
cssLink.Attributes["href"] = "firefox.css";
break;
Case "Internet Explorer"
cssLink.Attributes["href"] = "IE.css";
break;
//and so on
}
Page.Header.Controls.Add(cssLink);
I don't know what the actual string values of Browser.Type will be for each browser. You'd have to test.
Even with the above, I'd still recommend using a single stylesheet for all browsers. With a little effort you can make a page render almost identically across all major browsers.
First I'd recommend starting with a reset CSS file such as the YUI 2 Reset or YUI 3 Reset. From there most styles will apply well and consistently across browsers. With all default styles reset you can build out your styles with complete control.
Unsure if I follow fully but you can specify these in the App_browsers folder of your project.
Any solution for reducing browser compatibility problem while writing css style.
These three are the main points you need to do yourself:
Write correct markup - make sure it validates
Make sure your markup is in standards mode
Write correct CSS - make sure it validates
In addition, you can do some of the following to reduce the amount of headache:
You can use a CSS framework, like Blueprint, 960.gs, YUI CSS library, etc.
For Internet Explorer -related issues, there is ie7.js and ie8.js
Know how HTML and CSS work
Test in all browsers you target
You may also want to use a CSS reset file to start on the common ground.
Well, as of now there is nothing like fixall() which will make all browsers compatible...however, you can reduce compatibility problems by using the correct doctype.
Read thisarticle on using doctypes. Also, validate your markup.
Edit: You can go to Browser shots to see screenshots of your web design in different browsers.
Discipline!
Validate your HTML. Use a correct DOCTYPE.
Use standards, hack the bugs.
Be descriptive, or use a reset stylesheet.
Simple -- test, test, test.
First thing, you should have at least these browsers on your computer: FireFox3.5B , InternetExplorer7 (+ optional Safari 3, Google Chrome 2 Beta and Opera).
Now for a more definite answer:
avoid css3 styling like "opacity" et cetera as CSS3 is not a standard yet. Instead use Javascript libraries like jQuery to apply those effects selectively
avoid png transparency like the plague... instead use dithered gif transparency (this is now somewhat old, as it now works on IE7+)
Test and test and test