Is it bad to work with pixels in CSS? [closed]

Is it bad in terms of compatibility to use pixel numbers in CSS instead of percentages? How about lower resolutions? Is it okay to work with them in ranges of 1-100?

Solution 1:

All of the measurements have their own purposes:

Use pixels for pixel-based things, like borders. You probably don't want a border that ends up being 1.3422 pixels wide.
Use text-centric measures (em, ex) for text-based things, like content areas, labels, and input boxes. It's an easy way to make sure you have room for text of a certain length and width.
Use percents for window-based things, like columns.

There are exceptions, of course. For example, you might want to specify a minimum column width in pixels. But follow the above and your pages will scale well. ALWAYS zoom in and out on your pages to see how they work with different font sizes and browser shapes -- don't get surprised later.

Solution 2:

This is a difficult question, because the answer mostly depends on your situation.

Pixels are not that bad, I mostly use them too. (Sometimes even for font sizes.)
I usually fix the outer block element of the layout by a given size (pixels with fixed-width layouts, and percentages with fluid layouts), and on the inside elements I usually set percentages whenever possible.

There are some elements which simply can't be styled with percentages or ems, especially the more fancy stuff coming from graphical designers who don't understand such principles.

For example: if you have a column on your site with a simple style, you can set its width to a percentage easily, but if it has a background image with a specific width that is not designed with scaling in mind, it only looks good with a fixed-width. In such cases, you'll have to ensure that the rest of the page occupies the remaining width correctly.

Note that you can use pixels with percentages together.
For example, this is a snippet from one of my latest web apps:

min-width: 800px;
width: 80%;
max-width: 1500px;

The choice also depends on what design or layout you would like to achieve.

For a fixed-width layout, pixel values are fine. If a designer gives you a Photoshop image that contains really fancy stuff which would be extremely complicated to even think about how it would resize, you should definitely go for this.

If your layout needs to be dynamic, you should use percentages to make sure that it expands as the resolution changes, and you can use the above code snippet to make it look better in scenarios where it would otherwise look insane.

Some layouts (eg. imagine if StackOverflow would take up all the space) would look pretty ugly on a width of eg. 1920 pixels - the line widths would be so insanely high that it would be extremely unconvenient to read.
This is what max-width is for. Even in some dynamic layouts, you'll have to limit the maximal width of your site to maximize usability and readability.

And also take into consideration the smaller screens.
It is true that noone uses a 800×600 desktop anymore, but many people browse the web with mobile devices which have even smaller resolution.
This is what min-width is for: to make your dynamically expanded layout look less crowded on smaller resoultions.

I hope this helps.

EDIT:

The Smashing Book has some very nice thoughts about the subject.

EDIT 2:

I don't want my post to sound like I want you to force pixel-based sizing on your visitors.
(Apparently, some people in the comments misunderstood me in such a way.)

To clear it up:

I believe that the ideal layout is one that adjusts well to any possible resolution or setting.
However, we can't always do everything perfectly. Time/resources and the target audience are the key to determine if your site requires that advanced functionality or not.

I'm suggesting that you use the right thing for the given job.

If you are developing a site which will have a significant percentage of visitors who require more advanced adjustments to the site, it may be well worth it.
(Of course, sometimes we just do it for ourselves to have the feeling of doing things the right way, but is is not always a financially sound decision.)

Still, you should do the proper research about what sort of site will be it, who will be the visitors, and such stuff, before deciding about layouts, and whether it is worth the time to make them fluid or more dynamic.

Solution 3:

Font sizes

I think you must first understand the issues that exist with working with pixels in CSS:

Zoom in older browsers is broken. For example, IE6 and IE7 do not resize text when zooming. Line-height can be quirky too. These problems do not exist in modern browsers, but they are a reason why many shy away from using pixels for font sizes.
Everybody will see text the same size if you specify the font size in pixels. Browsers have a default size of 16px for paragraphs, so if you only use em and other relative sizes, you will respect the decision of users who change this. This is especially important on text heavy sites, especially if there are more older users. On the other hand, if the design of a site is important I think it is possible and justifiable to use px to specify font sizes without breaking usability.

In the end, you need to make the decision yourself, and it does depend on the exact circumstances, but I think that specifying font sizes in pixels is okay.

By the way, when working with em to specify font size it is a good idea to set the body to font-size: 62.5%. This means the base font size is 10px, so 1em is 10px, 1.6em is 16px and so on, making it easier to think in pixels while designing using ems. I still find it frustrating to work like this, especially when the values of ems cascade. There are some very handy sites like PXtoEM.com that help with this.

Layout issues

The screen is a pixel based layout, so pixels are an intuitive choice for many things. The main issue here is that different users have different screen sizes. As others have pointed out, using min-width and max-width in pixels along with width in percent is a helpful way to respect the size of the screen, while preventing your site to be unreasonably squished or stretched on very small and very large windows.

However, I would generally avoid this approach in favour of CSS media queries. You can then use fixed width chunks and make the layout wider (amongst other things) as the screen size increases. However, CSS media queries, like all cool web technologies, suffers from lack of browser support. Most notably, IE8 and earlier do not support them, although there are JavaScript fixes. On the other hand, the iPhone and other handheld devices do support them, and I would strongly recommend them if you want your site to look nice on these devices.

I think fixed width grids are fine. Fixed width grid systems like 960 Grid System are popular enough in their own right, and there are so many other sites that have a fixed width, that I doubt you would hear many complaints if you did this. Handheld devices that do not have large screens are an issue, but this is where CSS media queries should be used, so it is possible to specify everything in pixels and have your site looking beautiful on the desktop and on the iPhone.

Conclusion

Ultimately, everything depends on who your users are, what you need to support, and what you want your site to look like, but there is nothing inherently wrong with using pixels in CSS.

Solution 4:

That depends on what you are styling. For columns for example, the width should probably depend on the text size to ensure that it will look optimal on multiple resolutions/screens. If you want to divide your page in two parts, you should use percentages. But if you want a 1px border between these two parts, independent of the resolution, use pixels.