There are many ways we can deal with CSS browser compatibility issue.
Such as using Box model design or developing different style sheets for different browsers or using Dynamic CSS techniques (writing PHP script in CSS file).
Is there any way that we can know that Style which is being executed in the browser is supported by that browser or not?
Can we write code something like below in dynamic CSS using PHP code. I mean is there any function or way to achieve this functionality.
FILENAME: styles.css.php
<?php
header("content-type: text/css");
// isStyleSupported() function will return true or false with respect to the browser it is being executed
if (isStyleSupported('min-width')) {
// styles here
} else {
// alternative style here
}
?>
I know it might be difficult to keep the record of different version of browsers with respect to its CSS support. But still curious, if anyone know any solution or alternative method?
You can't determine the browser of the client with a purely server side solution like PHP, since the server only sends information out and receives no feedback from the browser.
This sounds like a job for Javascript, where you'd check if a particular CSS style is supported by the client's browser..
Once you determine what styles the requesting browser supports, you can use AJAX and PHP to serve the correct styles. On the other hand, you could also use pure Javascript to serve the correct styles.
The advantage of using a Javascript function vs an AJAX triggered PHP function, to test for CSS style support, is that you can actually test the individual browser CSS support with JS instead of relying on some documentation of what styles are supported by what browsers, which you would have to do with a PHP function.
At any rate, you need Javascript to determine the browser being used.
I Googled for IE hack and found pages like CSS hacks which are relevent to your question: how to embed conditional processing within the CSS (not using PHP).
Related
I like to generate CSS constants using PHP and I'm wondering if there's a way to do this that will still leverage cacheing. Right now I'm defining everything in the index.php file and while it's a web app and so the extra 20-80kb of css isn't toooooo relevant, it would be nice to have it cached so my question is twofold:
What's the most optimal way to generate CSS using PHP (or a similarly cross-browser solution that doesn't need to render using JS ala LESS or SASS)
Does the procedural generation of CSS values using PHP get ignored by the end-browser if the values are unchanged? In other words, if I don't touch the layout for a month and somebody visits twice in that month, does the very fact that PHP is outputting the data break cacheing or, so long as the data is identical, will the cache still be respected by most modern browsers?
Thank you!
If we use the http link header to provide a link to a CSS file very early on what browsers would NOT download this link and are there any browsers for which a CSS file provided this way would block rendering the "above the fold content"?
This would be the HTTP header:
Link: <style.css>; rel="stylesheet"
This an untested PHP implementation of the same thing (if one does not configure apache to do it like hinted at in the link above):
<?php
header('Link: <style.css>; rel="stylesheet"');
?>
Question: cross browser compatibility and render blocking behavior
Apologies in advance that my response is not directly in reference to use of the http Link header. If the objective is to try and load non-critical CSS asynchronously(in the background without blocking page rendering), this can be achieved with JavaScript. See the loadCSS project for some good documentation and examples.
Normally, all CSS files included in a standard way(e.g. <link href="path/to/mystylesheet.css" rel="stylesheet">) do in fact block page rendering until ALL stylesheets have finished loading. This is for good performance reasons by browsers in order to prevent multiple re-layouts and re-paints when loading a page after each stylesheet finishes loading.
The idea with this solution is basically to alter the media type for the non-critical stylesheet(s) to something the browser will see as unimportant for page rendering(e.g. "only x"), and then manually switch the media type back to the standard "all" (or other value as needed), which is likely after then resource is finished loading, but could be further deferred if desired based on your use case.
This method is pretty reliable as long as you only need to to support relatively modern browsers. I've used it in production for content thats had millions of pageviews. You may be able to implement something similar using the Link header but you'd still need some client side script in place to detect when the resource finished loading and to switch the media type back to "all".
I am not sure if you can do that with a header() function, but non-blocking css can be done with JavaScript - see this paste: http://pastebin.com/TYcnb99m
It uses local storage as cache for loaded css files and is non-blocking.
Some more links:
https://gist.github.com/scottjehl/87176715419617ae6994
https://github.com/filamentgroup/loadCSS/
Hope this helps.
Ok So I am making a 2.0 version of a my website and completely re-designing the layout I have brought in bootstrap because what I mainly want to do is make the website mobile friendly so basically what I'm trying to do is something along the lines of this and done in php
if(browser-width < 600px && browser-width > 100px) {
<div class="mobileHeader">stuff here</div>;
}elseif(browser-width > 700px) {
<div class="sidebar">stuff here</div>;
};
I hope this makes sense I have been trying to figure this out for awhile to no avail.
You can't access browser width (or any other user properties) with PHP. The only thing possible would be to set the width in a cookie (with JS) and then read it with PHP. However, this works only on the second request, as PHP gets executed before JS.
I do suggest you read something about responsive webdesign and you might find out you don't actually need this.
You cannot know the browser-width in php. You have to do this with javascript. Also even if php had this result, it is static, so what if you resized the window? Php wouldn't detect that. In my opinion you are choosing the wrong tools for your task.
Source to prove my point
The browsers don't report chrome width on the request. So PHP will never know that. You will need to do that with CSS media queries or with JavaScript.
I want to display Html page generated using PHP and CSS directly as a pdf.
I have searched a lot for this but endup with lot of libraries to do these task. But I don't want to use any libraries and just want to render it as PDF by defining header tag.
I am not sure but, have little in memory it is possible without using any API, library which might be wrong so want to confirm before proceeding to another solution.
Hope there might be the simple way to do this, as this is the most required feature for most of product.
First of all, I'd recommend using a library for this because although it "might be wrong", it's probably more correct than what you or I would come up with. Second, (most of) this isn't done using headers ;)
If you REALLY want to do it yourself, the native PDF functions in PHP are found here, which libraries like FPDF (my personal favorite) use directly in their implementations.
To print a page to PDF, you'll have to render it first (create the HTML DOM and apply the CSS) which PHP does not do. You'll have to render the page first with an HTML engine like WebKit, and then return to PHP for the print operation.
Again, this should probably be done using a library, saving you headaches and debugging. Of course, this question has been asked before so there's plenty of info available.
But if you want to have a go yourself, that's the path you must walk (or crawl). Me, I'd take the bus.
UPDATE
To answer your question in the comments:
<?php header("Content-type: application/pdf;charset=UTF-8"); ?>
Putting this on the top of the page render the pdf but it's not
working generated in this way. So, can you suggest any thing for this.
That header is for an HTTP request. When the request is returned from the server, it sends a header suggesting what type of content is being returned (JSON, an image, a pdf, whatever).
In other words, that header doesn't actually make a PDF, it just tells the browser to expect a PDF. After the header, the server then sends something (hopefully, a PDF).
That's why I said your original question isn't done using headers.
I'm starting to get into a lot more JavaScript thanks to a few UI frameworks such as KendoUI and Dojo/Dijit and I'm trying to integrate these with my custom MVC framework. However, all of their examples have the JavaScript embedded in <script></script> tags along with the HTML, which is fine and just means that the code gets dumped in my Views.
I was just wondering if there was some 'standard' or 'more acceptable' method of presenting custom JavaScript code in my projects. Is embedding the code in the HTML the best way to do it, or is it considered nicer to store the JavaScript in .js files and link to it from the HTML?
Use a script tag, for example <script src="foo.js"></script>
Ideally use a minified version, for example <script src="foo.min.js"></script>
If you're building a website, also look into ways of caching the file (and uncaching if the files changes), for example by using a datestamp in the file name.
Some programming frameworks have ways to automatically combine and minify all the JavaScript files for a page. For example, Rails has an asset pipeline that handles this for you.
This is the style I use,
1).I usually link js libs ( jQuery and etc.. ) using <script src="libURL"></script>
reasons :
This caches the js lib. Most of the pages in my site will be
using that particular js lib and caching will reduce the loading
time and bandwidth use.
Once I got a newer version of the js lib I have to just replace
the old one with the new. No need to change stuffs page by page!
2).I embed scripts using <script>//codes here</script> method when those codes are specific to that particular page.
Reasons:
To make sure I will not mess up with my codes! ;-)
These codes have more tendency to be changed while updating the site,therefor it's good not to have them cached.(But no use if your site is not under going rapid changes!)
You should use external <script> tags to allow the browser to cache the scripts and save bandwidth.
Optionally, you can also automatically minify them.