How do we check to see if the browser browsing a webpage is CSS3 capable. I know how to check for which browser is coming in using PHP but how do we check specifically that the browser supports CSS3.
Any ideas,
Marvellous
PHP (and I imagine any other server-side technology) has no idea about a browser's CSS capabilities. However on the client side, you can use Modernizr and handle rendering of your page based on the guides it gives you about what CSS3 properties a browser supports.
No browser supports all of CSS 3. Many browsers support bits of CSS 3.
You can detect some CSS 3 features with Modernizr, but that uses client side scripting.
CSS3 is not 'one' feature that you can detect. Browsers implement parts of it one after another. So, for example, IE 9 implements parts of CSS3 like box-shadow, but does not support some other things.
What you could do is make a list of browsers that support a given CSS3 feature and test the user agent. If you do this, http://caniuse.com/ may be a good help.
But I dont recommend this. The best way to check certain features will be client-side, for example with Modernizr.
Edit: If you need to provide a fallback, do it client-side too. Modernizr optionally includes a library named yepnope, with which you can easily load files if the browser doesnt support something. This could look like this:
yepnope({
test : Modernizr.csstransitions,
nope : ['jquery.js', 'transitions-fallback.js']
});
This code snippet would test for csstransitions and if they are not available, it would load jQuery and the transitions fallback js file.
You can't do a blanket check because of the patchy support of CSS3 and the variances between browsers. See here: How to check a certain CSS capability in a browser using JavaScript?
I'd recommend you to use Modernzir - http://www.modernizr.com/
There is some web tools that can check how your browser is css3 compatible:
Selector test
Acid3
Modernizr
And there is a lot more...
Using PHP's get_browser function you can do
$cssversion = get_browser(null, true)['cssversion'];
This will tell you the highest version the browser supports but as others have stated browser do not support every attribute within a version.
Related
I have never understood why some people say making custom css for each browser is a bad thing. To keep my page size down and download times fast it makes perfect sense to me to make a custom css for the major browsers (especially IE in its many different forms), and a general catch all css for everything else.
If you want to send out a bloated, huge, Swiss army knife of the css world, for all situations then go right ahead I'm not going to stop you.
Fast detection of the browser is important when doing this. Loading a JavaScript file to detect the browser seems slow. So I would prefer to use php to detect the browser, and send out the specified css. Or at least a general browser specific css then use the JavaScript to load a more detailed version of the css.
But I've read article after article about why this is a bad thing. The main reason behind each of these articles is because the user agent can be faked. Or there using Firefox but the server thinks they're using IE7 so it sends out the wrong css file.
As a developer/designer of web apps why is this my problem? If you want to use Firefox, but tell my server your using safari or IE*, and get a crappy looking page, why is it my problem?
And don't throw that whole if the user can't see your site right they'll never come back, or some kind of similar argument at me. a normal user isn't going to be doing this. its only going to be the people who know how to do this, and will know whats wrong when my site looks crappy.
This is similar to looking at my site on a old Apple II (I have no clue how), and yelling at me because everything looks green.
So is there a good reason, not a personal preference, why I shouldn't use php to detect the browser and send out customized css files?
I do this mostly for the different versions of IE. It just seems like for some sites, adding the if IE6 and if IE7 parts just double or triple the size of the css file.
Typically when a user intentionally fakes the user agent string, it is because something is not viewable in the user's browser that should be. For example, some sites may restrict users to IE or Firefox, but the user is using Iceweasel on Debian. Iceweasel is just a Firefox renamed for trademarked reasons (there are a few other changes also), so there is no reason that the site should not work.
Realize that this happens because of (bad) browser detection, not despite it. I would say you don't need to be terribly concerned about this issue. Further, if you can just make your site reasonably cross-browser compatible, it won't matter at all. If you really want to use browser-specific CSS, and you don't want to do so all in one CSS file, don't let a fake user agent stop you.
As long as the only thing you're doing is changing style sheets, there is no valid reason as far as I can tell. If you're attempting to deliver custom security measures by browser, then you'll have issues.
Not sure about php but in Rails it is normal and dead simple practice to provide css files and different layouts based on the user agent particularly when considering that your site is just as likely to be accessed by any of the myriad of available mobile devices, never mind writing for the most popular (Currently Firefox) browsers and even writing custom MIME types if need be is also dead simple.
IMO not doing so is pure laziness on the coders part but then not all sites are developed by professional teams of developers with styling gurus at hand. Also in languages other than Rails it might not be so simple. Sorry, I haven't a clue about PHP so this may not be an appropriate reply
In my opinion, starting with normalize.css, and having a base style sheet to start, overriding the base styles as needed usually works along with making sure you set appropriate fallbacks. If you really need it a few media queries, and feature detection can go a long way.
One reason you shouldn't base things off of the browser is because major search engines like Google and Yahoo prohibit displaying different content for different browsers. GoogleBot can detect different CSS and HTML and you may get bad search positioning. Additionally, if you use any advertising services you may be in breach of their contract by displaying varying content.
I want to exclude the jQuery Mobile JS library from my header when a phone does not have "A grade" support as listed by jQuery Mobile (http://jquerymobile.com/gbs/). I find that on old Blackberry phones (that support JS) the jQM framework grinds these phones to a snails speed.
As an example these guys do a good job at serving up the jQuery Mobile library and associated styles depending on the mobile browser support: demo.livebookings.biz
How can I implement a similar server-side approach so that I can choose when to include JS files (e.g. jQM framework) and any CSS files as per the mobile browser support.
Thanks
The jQM functionality is Client Side, More on this here:
http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html
gradeA function that returns a boolean, default: a function returning the value of $.support.mediaquery
Any support conditions
that must be met in order to proceed.
For Server Side you would need something like
http://code.google.com/p/mobileesp/
http://wurfl.sourceforge.net/
I've used Mobile ESP before and have had great results with it. It's also easy to extend/customize
http://code.google.com/p/mobileesp/source/browse/PHP/mdetect.php
You have to do this by using the browsers user agent, but as there are so many its hard to do by your self (and keep it upto date), WURFL is a library that does all the hard work for you, works out the phone model and gives you the phones capabilities.
Using this you can find out whether the phone has certain features within the browsers and depending on what you call "A-grade" you can use JS libraries or not.
They have a pretty horrible website but the detailed library and PHP to read & cache it is all given to you.
You can do this client-side by feature detection using the jQuery $.support() method:
<script src="jquery-1.6.4.js"></script>
<script>
//check to see if media queries are supported (this is how the jQuery Mobile framework detects "grade A" browsers), $.support.mediaquery returns true or false
if ($.support.mediaquery) {
//if support is found then load the jQuery Mobile JS file
$.getScript('jquery.mobile-1.0.js');
}
</script>
http://api.jquery.com/jquery.support
http://api.jquery.com/jquery.getscript
How to - using either JavaScript or PHP - detect addons that are used by a user? In particular the ORBIT addon.
I realize this is an old question but it popped up on a google search for me. It most definitely is possible to detect browser addons. Here are a couple of resources to check out:
http://ha.ckers.org/blog/20060823/detecting-firefox-extentions/
http://webdevwonders.com/detecting-firefox-add-ons/
In general, you can't.
Some addons (eg, Firebug) expose a client-side object model to the page, in which case you can detect them using Javascript.
I have some CSS style that does not work in IE and that works on ff and chrome. I want to be able to use if else. But can PHP ifelse be included in the .css file for me to achieve?
[edit]
I dont want two .css files for the purpose
Thanks
Jean
You could use conditional comments to hide a CSS file from other browsers.
If you really want to decide which CSS to serve, server-side, then you could look at parsing the user agent string to determine which browser is being used; but beware, that can effortlessly be fake - some browsers even let you pick what they'll identify as out of the box, so you might end up with false positives.
Generally speaking you don't want to customize your site for different browsers. You want to make everything as uniform as possible. Of course there are instances where you have to do things in a browser-specific way but in my experience, with proper techniques, these situations are uncommon.
Some general rules:
Always declare a DOCTYPE on all your HTML pages. This forces browsers (most notably IE) into so-called standards compliant rather than quirks mode. Quirks mode does things in IE like have an incorrect box model. For this reason I suspect you're doing things the wrong (quirky) way and FF/Chrome are actually interpreting it correctly. This is, to me, the most likely scenario; and
Use a reset CSS. Different browsers (and different versions of the same browser) have different defaults for padding, margins, borders, etc. It's best to reset it all to the same starting point and go from there.
Beyond that you can use the conditional comments.
You can interpret CSS files with PHP (if you're not too bothered about server load), if you put this line in your Apache configuration:
addhandler application/x-httpd-php .css
Then you can try to rely on $_SERVER['HTTP_USER_AGENT'], but beware it is not guaranteed to be trustworthy.
However, there are (IMO) better ways to achieve this, which include using IE's conditional comments:
<!--[if IE 8]>
<style type="text/css" ... />
<![endif]-->
Of course the most preferable way would be to rewrite your styles to avoid browser implementation differences, which is usually possible, but requires some level of CSS guru-ness if you're being forced to support an old browser like IE 6.
Css does not support conditional flow control. You should resolve on different techniques:
Have PHP to print out the CSS rules based of some browser sniffing. I do not raccomend this
include different css with the link tag into the header section using conditional comments
(see http://www.quirksmode.org/css/condcom.html)
I'm new at web development, so to make sure I'm writing good code I've been using w3.org validation tools. I'm currently working on a project where I generate a lot of my html with php functions, and I'd like to validate the html, but w3.org doesn't support that. The only way I've found to do it is to render my code, view source and validate that, but that's an awkward, time consuming process, that only approximates validation as it renders differently in different situations. Any suggestions?
Thanks,
Rebecca
Tidy Project:
http://tidy.sourceforge.net/
http://www.w3.org/People/Raggett/tidy/
Good luck.
Edit -
To be clear, with Tidy you can be reasonably certain that the output of your script is valid against a given standard.
You can use Html Validator add-on for FireFox.
The various developer tools in the major browsers will help you validate the HTML your script emits.
IE6/7 - you can install the IE Developer's Toolbar
IE8 has the toolbar built in
FireFox - you can get the Web Developer Toolbar as an addin
I think Opera has some tools built in as well, but quite frankly I only use Opera for testing after I've built using Fx and IE.
The validator tools will not care about php, so if your php is 'bad', it won't care.
It only checks html for concision and proper nesting to the doctype.
Try this, Web Developer 1.1.8 toolbar.
This ad-don works superbly, you can validate locally, for example:
Validate Local CSS
Validate Local HTLM
if you don't have access to some external web-server or even if you do have access to it.
In addition the installation is easy and to validate a given page all you have to do is right click on Tools and there is a whole array of validation options.
https://addons.mozilla.org/en-US/firefox/addon/60
Alternative approach: Hitchhike direct-input at the W3C validator:
( I am also facing the problem, that my staging server would need to be online,
to allow for an easy validate-here link... )
The direct input at the w3c validator submits a form.
Or in other words: The actual validation-page receives a POST request.
So how about: Make a link (i.e. in your footer) that leads to a submitForValidation.php
In that php file:
grab the Referer-URL you just came from (through your localhost server)
submit as POST to the W3C page
Not done it yet, but will probably implement that soon.
Step 1: Run the PHP to generate some HTML, with a command like this:
php index.php > index.html
Make sure that php is in your system PATH variable.
Step 2: Validate this index.html with normal html validation tools.
Opera 12 is good for validating generated pages, you just go to the page, then right click and validate. that's all, so easy that scares lol.