The job of a User Experience developer is quite difficult. As a UX developer, not only am I expected to make the content presentable, but I have to also ensure, that my changes do not affect the performance of the webpage. Now, it’s not always possible to conclude what visitors might like, in terms of presentation. However, it is easy to infer, what visitors would definitely NOT like. And that would be ill-structured content, and a slow site.
What happens is, sometimes, the styling added, does not work with certain browsers and could result in awry looking content. But loading additional stylesheets might affect your site’s performance. So then what is one supposed to do in this case?
If you’re like me, facing the same problem, do not worry! Overtime, I’ve armed myself with the tools (knowledge and experience), to guide you in the right direction. The way out, is to conditionally enqueue stylesheets. So that’s exactly what we will be learning today:
- How to enqueue stylesheets for particular pages
- How to enqueue stylesheets for particular browsers
[space]
Conditionally Enqueue Stylesheets for Certain Pages
For pages to load faster, the number of requests each page has to make should be few. So let’s start by reducing the total number of stylesheets needed by your site. But there may be conditions out of your control. For example stylesheets added by plugins, or styling needed by particular page templates, added in different CSS files. In such cases plugin and theme developers should take care, to ensure that the additional files are loaded only when needed. For example, stylesheets added by a plugin, should be loaded only when the plugin is activated, or if the plugin adds a shortcode, then stylesheet could be enqueued in the shortcode function itself.
To conditionally load stylesheets for particular pages, specific to a particular page template, you can use the following conditions, to decide whether or not to enqueue the files:
[pre]is_page(”)[/pre]
This is_page function can be used to conditionally check for a particular page, before enqueueing the stylesheets.
[space]
Conditionally Enqueue Browser Specific Stylesheets
You might have come across a lot of CSS properties which do not work with certain browsers, mainly IE *ahem* *ahem*. No stress. There is a workaround. For those of you using the <!–[if IE]> … <![endif]–> in the header or footer to enqueue your stylesheets, you do not need to do this anymore. Instead there is a better way to enqueue stylesheets (and scripts) using the ‘conditional’ property.
Add all the browser specific CSS in a single file. In the example below we have added the IE8 specific CSS in wdm-ie8-style.css. We then need to enqueue the stylesheet conditionally, using the code below:
function wdm_enqueue_stylesheets(){ wp_enqueue_style('wdm-ie8-style',get_stylesheet_directory_uri().'/wdm-ie8-style.css'); // add condition for IE8 global $wp_styles; $wp_styles->add_data('wdm-ie8-style', 'conditional', 'IE 8'); } add_action( 'wp_enqueue_scripts', 'wdm_enqueue_stylesheets' );
Just add the code in functions.php of your theme, or your plugin file.
The ‘conditional’ property is used to load the stylesheet only for particular browsers (specifically IE). You can combine it with directly a browser version, (like we have done), or add browser version and lower, or browser version and higher (using lt, lte, gt, and gte), along with the browser version.
Do note, this does not work for IE10 and higher. Although those browsers are much better and support a lot of properties, in case you face any issues, you can refer: How to test IE version in PHP, to add the needed condition.
[space]
Well, I’ve done my best to give you tips, which can help you load stylesheets only when needed. Thus not affecting your site’s performance, and yet styling your pages as needed. But I’d love to hear your suggestions and tips, so do leave your comments in the comment section below 🙂
