Tag Archives: Web design

CSS selectors – new look over them

css, , , , , , ,

How do you select?

When it comes to CSS selectors, most of us are using the most familiar selectors by id or class name. Something like:

.my-class {}
#my-id {}

But as you can see in most of the big JavaScript libraries, such as jQuery, you can improve the selection of element/s by using complex selector syntax.

Do you know the syntax?

Maybe yes, but maybe not! As I stumbled upon an interesting article on http://css-tricks.com
The Skinny on CSS Attribute Selectors.
The good part is that now you can use this powerful selector syntax to improve CSS.

Browsers

Because this is the most interesting part – yes it is supported by MSIE, and no – not before IE7, be careful if you’d like to support it.

CSS border-radius vs. images!

css, web development, , , , , , , , , , , , ,

Rounded corners

This is one of the main problems of web design and development now, even if it sounds strange. The thing is that with round corners the elements become more nice and groovy and most of the web designers make such design templates. The problem than comes over the web developer who’s supposed to convert this into HTML and CSS. Of course it would be nice if all browsers support rounded corners in CSS, but they don’t and guess what IE fully doesn’t support it.

-moz and -webkit

Most of you have heart about this patches in CSS when you can use this prefixes for Mozilla based and Safari’s Webkit based browsers. Than you can use border radius with no pain, and you get the same effect as with using images.

-moz-border-radius : 4px;
-webkit-border-radius : 4px;

Of course on IE this doesn’t work and the element remains with square corners. But what the question is, should we make both versions for non IE browsers without images and a version for the “great” MSIE and all of its versions?

My answer is: no!

Although many sites do that, see vimeo for instance, there’s no need to support that. As the rumor and the MSIE blog says in IE9 which is … coming soon there will be – border-radius property.

That’s awesome!

Finally Microsoft has done something good! So stop using background images! This is hard to maintain, difficult to make and it’s bad for the browser loading time, because of the extra images/sprites.

Manage JavaScript and CSS includes within Zend Framework application

css, javascript, zend framework, , , , , , , , , , ,

How to include JavaScript and CSS files?

In Zend Framework there is a very elegant way to include CSS and JavaScript. Because in one single view of any action you cannot include a JavaScript or CSS because they wont be executed from the browser, you can simply use a helper.

You can see the original source of how that’s done here. And in breve you can include a JS file like so:

<? $this->headScript()->appendFile('/media/js/global.js') ?>

but where the problem is?

As a very good PHP point of view, there is really that way to include JS into the application. But a PHP point of view is not a JavaScript point of view so this solution is not the best one.

As almost everybody knows JavaScript blocks other content until it’s loaded and executed from the server and nowadays the most popular way to include JS is just before the closing <body> tag.

That’s why the ZF solution is not optimal. What we actually need as both PHP and JavaScript developers is a most robust solution!

CSS sprites. Go beyond the limits with base64!

css, micro tutorial, , , , , , , , , , , , , , , , ,

Why should I optimize CSS?

In fact how and why should I optimize CSS is the right question. Actually CSS is simply one ore more files loaded from the server to the client, usually a browser, with CSS specific rules that must be applied by the browser to the web page you’re seeing. That’s in general. Of course there are exceptions when CSS can be inline or added directly to the HTML tags, which is bad practice because thus the HTML markup becomes larger and even worse the browser cannot cache it and than load it quickly. In fact that’s why usually the CSS of a web page is put in one single file. Primary because that makes only one request to the server and in second hand because it can be cached by the browser.

Just because the nature of the CSS is that firstly it’s loaded and than executed one of the primary techniques of optimizing it is to make it smaller and therefore load faster. There are several methods of doing so. Enabling GZIP support of the web server and minifying the file are the most common ones. But one of the tricks you cannot optimizing just for second is using the so called CSS sprites.

CSS sprites

What are these? To answer this question I’ll simply try to give you an example. Let’s assume there are three CSS classes each one with its own background image. This makes four requests to the server. One for the CSS file and one per every background image. But what we’d like to achieve is to make less requests as we can. Than one of the things we can do is to make one single image and to change only the background-position CSS property to position it on the right place and to make it appear correctly.

Be careful! When you join all of the images into one single CSS sprite you may add one class with that background-image and every other class with only background-position property. Than every DOM element with that background must have both class names. Only than you can be sure the server will make two requests. One for the CSS file and one for the sprite.

base64 to encode images

In other hand most of the web projects are pretty big, and unfortunately it’s too difficult to make only one single sprite just because it’s too difficult to manage it after the project has become very large. That’s why mostly in the practice there are several sprites for the main components. But the problem is that again there are more HTTP requests.

Is there any way to make only one request?

Yes there is. Simply by converting your CSS sprite into a base64 encoded image. In breve base64 is an encoding where you can practically make any data into a string. Thus the image can be represented by a string containing the same information as the image. Hopefully most of the browser, except of course MSIE, does read the so called data urls, or:

<img src="data:image/png;base64,..... " />

and that’s enough to get started with base64 and the single request. The sprite has become a string!

CSS and base64

The natural question is now how to merge all this? You now have one CSS file with one or more sprites. Than you can convert them into a base64 encoded strings and put them all into the CSS.

There is a problem, of course, what happens with MSIE. As I said before MSIE doesn’t read base64 encoded images. Hopefully there is a solution described very well by Stoyan Stefanov in his blog post here.

Finally …

now there is only one request and everything works pretty fine. This technique can be really helpful to someone who’s trying to optimize the CSS performance to the limits.

CSS effective selector

css, micro tutorial, , , , , ,

CSS optimization

Recently I posted an article about CSS optimization describing five simple steps you can do to speed up the page load time and the bowser execution time. One of the key features is to use effective selectors, but what exactly that means.

Parents and children

In CSS, after the name of cascading, there is a very powerful feature of inheritance and you can simply describe a child style by a selector which can be something like that:

div table tr td a { color: red; }

In reality is very, but very inefficient. Event it is a working example, the browser will find every anchor <a tag within the page than check if it’s child of a td, than tr and so on until the closing outer most div tag.

That’s why the browser is really hard to find every one of these tags just to apply a simple font color. What the big problem is that once you have thousands of tags in that page the browser starts to use CPU and the application starts to be irresponsive.

The solution

Of course there’s a simple solution, which can be described as transformation from inefficient to efficient selectors. Because the browser can find a tag way faster by a given ID or CLASS you can simply convert the code above with something like:

a.my-class { color: red; }

and than change a bit the markup with a tags with that specific class name. Which is a bit tricky, but speedups the performance a lot.

How can I find bad selectors?

Actually that is the big problem. Once you’re into the deep of web development the applications are so big, with so many CSS selectors and so many CSS rules that you simply cannot track that any more.

Hopefully there comes some tools that can describe you everything and point you the inefficient selectors. My personal choice is the Google’s Page Speed plugin, which can be installed to the Firebug on Mozilla Firefox. It can analyze the page and extract a list of inefficient and so called very inefficient selectors that must be fixed!