Is there is any feature that enable auto switch of css files based on different browsers.
I don't want to use javascript code for browser detection and switch of css files.
As browser files in asp.net help in loading different css props for different server controls on runtime. Is there is any feature for us to use for auto switching of css files
Thanks
This would bring in a lot of overhead in development and maintenance. The typical way in supporting multiple browsers is by creating a main stylesheet for you site which covers your targeted devices. You also rely heavily on the knowledge stored in those browser files. What if the user agent string is not the actual browser visiting the site?
Use techniques such as:
Utilising vendor prefixes -webkit- -moz- etc.
Media Queries
Ensuring you use percentages as much as possible, fluid layouts.
& Lots of Trial and Error
If this is to cover older versions of IE then you can utilise IE stylesheets and IE selectors.
As described in the Holy Bible for CSS: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
I know this is not the sort of thing you looking for but I feel your going down a very bumpy and messy road.
Thanks,
Mike
Related
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.
I am building a mobile site and have looked into media queries but don't really like the lack of support. I'm really wondering what methods or approaches are commonly recommended.
On our site we are using head.js (http://headjs.com/) which adds classes into the tag about the client, notably: browser, width and supported features. What do people think about using this javascript method as a better supported way of handling different users and changing the design layout accordingly.
I do feel that perhaps this JS approach is used as our main method but that it might be worth using a number of others a fallbacks. Here is perhaps a chain of support.
1st: All universal styles plus layout for narrowest device window.
2nd: Use some method of CSS targetting to add a desktop style sheet if desktop viewing is assumed, possibly media=screen
After this we are handling the lowest and the highest denominator.
Finally: Use the styles (width etc) created by the javascript to fine tune the design for different layouts.
Thoughts?
Is there a way to make sure your CSS is cross-browser capable?
I tend to work with strict doctypes, which solves a lot of problems.
Study http://www.quirksmode.org/ by Peter-Paul Koch
I refer to this site all the time.
However, as Ernest Friedman-Hill wisely pointed out, testing...
No, not absolutely sure, unfortunately. Testing, testing, and more testing is the only solution.
Here are a few tips:
Try not to use CSS3 (yet).
Don't use browser specific selectors, such as ones prefixed by -moz- or -webkit-
Use a CSS reset, like http://meyerweb.com/eric/tools/css/reset/
There are a few ways to do that.
First you will want to check on a few browsers when you are done with your website. Some good options to do that is Adobe Browser application, another is browsershots.com and you can find others.
Another great rule of thumb is to use an established framework that is already cross-browser (my favorite being 52framework at http://52framework.com ).
And honestly after years of writing CSS it seems that you will just get use to writing the best possible CSS and you will have cross-browser code of the get go.
There really is no sure way to write perfect CSS first time around (there are validators out there that can help a little, Dreamweaver has a specific tool that will validate code and CSS and let you know if its capable or not.
Good luck!
Your best option is to test in each of the browsers you want to support. If you don't have access to all the browsers there are for-pay web sites that will take screen shots of your site using different browsers:
http://browsershots.org/
Did you mean "capable" or "compatible"?
Anyway, I always use the W3C CSS Validation Service. It checks your CSS to make sure it is valid. After passing this validator, chances are your CSS is cross-browser compatible. But I would recommend also manually inspecting your CSS in different browsers. Do check out http://www.css3.info/ for details on how different browsers implement different features of CSS 3.
I would also recommend you install the Web Developer Toolbar if you're planning on doing heavy web development. Great tool for Firefox and Chrome.
My ASP.Net application only comes out properly if i am previewing it in Internet Explorer but its the ugliest thing ever if i view in Firefox,Chrome or Safari.
How can this be, and how can this be resolved.Helppppppppp
What DocType are you using? If you're using transitional then IE will be rendering in quirks mode. Force a DocType of strict.
Check out this link here for a good explaination of DocTypes and this link for an explaination of one major way the Doc Type affects layout: box models.
Have you compared the source of the pages in the different browsers? Are they the same, or are there major differences? If not, then you'll need to work on your CSS - and for that there are few better tools than Firefox and Firebug.
If the source of the pages is different, then you're falling foul of an ASP.NET feature that checks your user agent against a list of Browser Capabilities or the Browser Definition files - and in earlier versions of the framework, these were woefully out of date - what rendered as a <div> in IE would come out as a single cell <table> in Firefox.
Since ASP.NET 2.0, you've also been able to change the behaviour of controls with Control Adaptors - for example the CSS Control Adapters will output styled divs for most of the tabular controls (login, registration, repeaters, etc) - which again can be targeted to specific browsers.
I'd advise using FireFox as your development browser, while testing in IE and Chrome as well.
Besides being more standards based it has superior web tools within, like Firebug, yslow and
Web Developer.
Cross browser compatibility is, unfortunately, not trivial. It is a large topic with a lot of material devoted to it. As dove suggests, it's best to use a (relatively) standards compliant browser to do your development work, e.g. FF, Opera, Chrome or Safari and then tweak to make it work in IE 6/7/8 afterwards.
I would recommend against using any of Microsoft's built in theming etc. and stick to pure CSS based styling as much as possible. The ease of making your site cross browser compatible will, to a large extent, depend on your knowledge of HTML and CSS, but I recommend starting with a good CSS framework or at least a good CSS reset (which removes browser specific default styling and allows you start with a common base). Try having a look at Tripoli, which gives you a common cross browser CSS standard (a reset plus rebuild of default styles).
The usual way to tweak the CSS for IE is to use IE specific conditional comments to include an extra CSS file only for IE, e.g.:-
<link rel="stylesheet" href="http://tempuri.org/styles.css">
<!--[if IE]>
<link rel="stylesheet" href="http://tempuri.org/styles.ie.css">
<![endif]-->
You can also include different stylesheets for different versions of IE, see here.
Recently I been doing some Web UI work, and it is frustrating to deal with all the compatibility issues, and the unexpected browser (FF, IE, Safari) behaviors.
Event bubbling
creating and destroying elements
dynamically adding elements with behaviors (that did not initially execute)
interacting with modals
z-index
I seek to understand how and why browsers work the way they do, and how they are built. Also any pointers or links about best practices. Thanks
I have a (pretty long..) summery on the subject in how browsers work. You can also see the resources list for other references.
Here's some informative links about how browsers work, and some information/guides about CSS and cross-browser compatibility:
How Web Browsers Work
How Web Browsers Work (less technical)
CSS and Browser Compatibility
CSS Compatibility Guide
And some detailed information about the specific things you're interested in:
Event Bubbling and Browser Information About It
Adding Elements to the DOM; Adding and Removing Elements Dynamically
Modals; Cross-browser Modals
z-index
Really, just use prototype or JQuery. The extra 12MB or so will drastically simply your development.
YUI theater has a bunch of great content. Watch the Crockford videos for more on Javascript / DOM issues.
YUI Theater
For CSS cross browser compatibility, a CSS Reset can help tame the madness a bit ("The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.").
As for inconsistencies with JavaScript bubbling, events, and behaviors, you could use a framework to help alleviate some of the pain. One of the goals of these frameworks is "write once, run anywhere [any browser]". JQuery is the most popular library at the moment. Google can help you find other frameworks.