What is the best way to choose the stylesheet that will be shown depending on the useragent?
Example, i want to show a css style for Android and a different one for IPhone.
Is it possible with css only?
Can i use something like media queries?
Thanks in advance
With Internet Explorer you can use conditional comments (http://msdn.microsoft.com/en-us/library/ms537512.aspx) to include stylesheets in a specific browser. This technique does not work in other browsers, and I believe it does not work in the latest version of Internet Explorer.
To my knowledge, the only way to accomplish this is with Javascript. The simplest method is to add a class to the HTML tag of the page (i.e. ".android" or ".iphone") with Javascript based on the user agent string. In the CSS simply reference .android or .iphone in your stylesheet to specifically target one or the other.
However, the best approach is to avoid doing specific browser detection whenever possible. Feature detection is the preferred approach (http://www.joezimjs.com/javascript/feature-detection-vs-browser-detection/). This is an exception as your intentions are to have a different theme based on the device.
See the isMobile Javascript library (https://github.com/kaimallea/isMobile) to easily detect an Apple or Android device. As long as the stylesheet isn't huge for each theme, I would recommend merging the Android and Apple stylesheets into one. Than use isMobile library with a little custom Javascript to add the necessary CSS class to the HTML tag.
Related
I would like to apply a CSS stylesheet to all page views in a Firefox browser using a menu option and be able to toggle this when required. (The functionality I want exists in IE: Tools | Internet Options | Accessibility | Format Documents Using my Stylesheet (although I think this may affect pages outside of simply IE).
You could use the file userContent.css lying within the directory named chrome in your Mozilla Firefox profiles directory. There is also an example file named userContent-example.css.
you can use Stylish, you can define global styles in firefox and ability to switch it on and off fast from Firefox.
Usage page.
Global styles, you can see code and how it is done.
There is another Firefox addon called Platypus which which adds a toolbar for editing site styles. It does require you to install Grease Monkey.
I just installed Stylish and my first impression is that is nicer than Platypus, especially when it comes to sharing your styles with others. But I'll reverse my judgment as to which I think is better when I have more time to compare them. :)
Firefox add-on. Facing some padding problems for some XUL elements in mac os (windows, linux are okay). I wish to know if there are any css tricks to identify the OS platform and apply a style to an element only for that OS ?
From a search, some of the possible options I found are :
Create a separate stylesheet file for the OS and modify chrome.manifest to point to that.
Use some external js library and use css selectors.
Identify platform from the add-on code, and load and register a second style sheet using the style sheet service
First option requires me to duplicate everything in stylesheets. Second one brings in dependency on other libraries. Third option might work, but I want to know if there are any simpler, elegant solutions ?
Thank you!
Those three options are pretty much it. For the first option you should put all of the common css in to one css file, and load that on all platforms.
are there any web browsers that do not support javascript? and how to identify if client is using one of those browsers? or client has disabled javascript?
are there any web browsers that do not support javascript?
Of course. Lynx is just one example.
and how to identify if client is using one of those browsers?
Using the <noscript> tag to provide alternate content.
or client has disabled javascript?
Same answer as previous : using the <noscript> tag.
You should never test if a client is using X or Y browser. Always perform feature detection. Step one: use <noscript> for providing alternate content to clients that do not support javascript. Then test whether the client supports the feature you would like to use. Never test if IE8 or FF3 or something else, ...
Modernizr is an excellent framework which could aid you with this. So if you want to use some of the new cool HTML5 features, don't test if the browser is such and such version: test if the browser supports the feature you would like to use.
As if you will working with CSS :
Many adding no-js class in <html> tag like..
<html class="no-js">
and they do replace no-js to js by javascript later, like..
<script>
document.documentElement.className = document.documentElement.className.replace('no-js','js');
</script>
So when client has disabled javascript.
Example use :
HTML :
<div class="test">This box with some JS function</div>
CSS :
.no-js .test {display:none;}
Hide this box, when client has disabled javascript.
or..
HTML :
<div class="alert">Please, turn you JS on!</div>
CSS :
.js .alert {display:none;}
Hide alert box when JS is on. But still show when JS if off..
Or do something many more... with no-js or js classes..
If your looking for HTML tag for detection :
just <noscript></noscript>as another say
All of the modern major browsers support JavaScript. There are however some that do not, but with an incredibly small user base relative to the main ones. Some users may disable JavaScript, in which case you can specify different content for those users using noscript tags.
Do you use any javascript framework ? (jquery, prototype...) They can abstract a big part of browser specificities.
To detect user browser, you can use the navigator object : http://www.javascriptkit.com/javatutors/navigator.shtml
And, as James and Darin pointed out, you can use the <noscript> tag for alternate content.
Where do I place this script in my HTML for it to work? And what changes do I have to make to it?
<script type="text/javascript">
var browser=navigator.appName;
if(browser="Microsoft Internet Explorer")
{
document.getElementById("html").innerHTML="\
<body><p>Your browser is IE.</p></body>";
}
</script>
Could I make a slightly alternate suggestion, skipping the spoofable UA string, and using a Microsoft-implemented (and standards-compliant) strategy:
<!--[if ie]>
<script type="text/javascript">
document.getElementyId("html").innerHTML = "<body><p>Your browser is IE.</p></body>";
</script>
<![endif]-->
To use this put it in the head of the document. I don't think it can be placed inside script tags (since it's based on html comment syntax, not JavaScript).
This uses conditional comments (Quirksmode.org link).
If at all possible, I would suggest avoiding direct browser detection.
Almost every case where someone wants to detect a specific browser (usually IE), it is because there is a particular feature that they want to use which isn't available in that browser, or has bugs.
But browser detection fails as a strategy here for a number of reasons:
You don't know whether a future version of that browser may correct the problem, in which case your code to fix the issue may itself cause problems.
If another browser also has a problem with that feature, you would have to detect that browser as well. Taken to the logical extreme, since no two browsers have exactly the same set of features, you end up having to detect every possible combination of browser, version and operating system.
Browser detection is virtually impossible to guarantee to be accurate. Most browser detection scripts are based on hacks that trigger quirks that only affect a particular browser, and most are pretty un-reliable.
Even just IE detecting isn't good enough. There is a big difference between IE6, IE7 and IE8. And IE9 is just around the corner, which will be massively different again.
So what should you do instead of browser detection?
Detect the feature. There are a number of ways of doing this, but the best solution I know of is a script called Modernizr. Place this script in your site, and your page will be given a bunch of CSS classes and Javascript properties which you can use to determine whether a given feature is available or not.For example, if you want to use gradients on your site, most browsers can use CSS for this, but IE and older versions of other browsers cannot. For these browsers you easily can use a background image instead. Modernizr will give you a CSS class of either cssgradients or no-cssgradients, and you can style these two classes accordingly.
Add the missing features to the browser. This is more tricky, but for certain features it can be done, particularly for IE. A good example is CSS3Pie which is a hack that allows IE to use the CSS border-radius feature (and one or two other features too) which is available in all other browsers. There are whole range of other little scripts like this which can improve the functionality of IE.
Use a library like JQuery which does all this work for you. With JQuery, you can be much more confident that most of your Javascript code is going to work across all browsers.
If you must use browser detection to tell if the user is running IE (and I accept that there are some occasions when it is necessary), then use conditional comments, as per #David Thomas's answer. But do so sparingly, after considering any other ways around it.
if(browser=="Microsoft Internet Explorer")
== for comparison, = for assignment
Place it in the head tags.
I normally work with jQuery, which takes away most of the cross browser pain (although not, unfortunately, all). However, it doesn't seem to have any support for manipulation of the CSS DOM, and this still seems to be a bit of a minefield - QuirksMode has some information.
Our application allows users to theme their site to some extend by generating a CSS stylesheet with the colours that they have selected. It's pretty straightforward, but I'd like to let them "preview" it by applying the changes directly to the CSS DOM, before having them save it back to the database and generating the CSS file.
Does anyone know of a library which will make cross browser CSS DOM maniuplation easier? Just so we're clear, I'm not trying to change the css rules on an element, or set of elements (like with $.css()), or to add/remove classes. I would like to modify the stylesheets directly.
I highly recommend the YUI stylesheet utility. I haven't seen any other libraries with as much functionality or as clean an interface.
Couldn't you just add or replace a <style> element in the main document's DOM, and fill it with the generated CSS?
Best and easiest way, is to create a .jsp .php or whatever you're using which accepts colour parameters, which in turn renders a .css output with colours replaced.
Use JavaScript to make a request with colour parameters and append the css script to the page.
It is possible to do it directly on the styleSheet object, though this will take more time and create more maintenance. Everytime you want to change your custom stylesheet you actually use for production, you will also have to change the preview version. Ergo discrepancies will ensue.
Just reuse the stylesheet template you're going to use for production anyways.
Maybe you should try something like:
document.styleSheets[0].disabled = true;
This disabled the first stylesheet of the current page. Maybe if you play around with it you can resolve your problem.