Bright Cherry » CSS

Remove Redundant CSS From Your Stylesheet

Maruf — Wed, 14 Jan 2009 19:11:03 +0000

Last week someone approached me with a problem- their website was running significantly slow. There were many obvious problems, but the issue I’m going to cover today is CSS stylesheets.

Believe it or not, but stylesheets can slowdown a website if they get too bloated. It’s extremely common for a web developer to fill stylesheets with unused code. This usually occurs over years of upgrading and maintaining a website- a lot of redundant styling builds up. It also happens when developers first build a website- the trial and error approach of developing usually leaves scars. In this case, CSS code.

The website I worked on had a HUGE stylesheet, and it was definitely one of the factors that helped with the slow loading. In fact, by the time it was uncluttered, the stylesheet had shrunk by more than three-quarters.

To help detect redundant CSS code, refer to this Remove Redundant CSS Tool.

Rounded Corners With CSS

Maruf — Wed, 15 Oct 2008 09:23:08 +0000

This is a pretty simple but useful tutorial. A lot of people physically create round-edged backgrounds with applications like Photoshop. While this is time-consuming and a complete nightmare for updating purposes, there is a much more efficient way of doing this with the use of CSS. Only problem is that it doesn’t work in all browsers just yet e.g Internet Explorer However, it works with the cool, geeky browsers like Firefox. If anyone knows an I.E fix, holla!

For example, if you want this image to have rounded edges:

To do the following:

You can use the following CSS code:

View Code CSS

 #nonround{
height:200px;
width:200px;
background:red;
margin-top:20px;
}
 
#round{
height:200px;
width:200px;
background:red;
margin-top:20px;
 -webkit-border-top-left-radius:10px;
 -webkit-border-top-right-radius:10px;
 -webkit-border-bottom-left-radius:10px;
 -webkit-border-bottom-right-radius:10px;
 
 -khtml-border-radius-topleft:10px;
 -khtml-border-radius-topright:10px;
 -khtml-border-radius-bottomleft:10px;
 -khtml-border-radius-bottomright:10px;
 
 -moz-border-radius-topleft:10px;
 -moz-border-radius-topright:10px;
 -moz-border-radius-bottomleft:10px;
 -moz-border-radius-bottomright:10px;	
}

(the various rules are somewhat duplicated so they work across various browsers)

Cool, right? Right.

Pure CSS Image Gallery

Maruf — Tue, 30 Sep 2008 07:50:09 +0000

If you look in BrightCherry’s team page, you’ll notice that I’ve implemented a small CSS image gallery for a few of our team members. It’s a simple CSS image gallery- no Javascript or any other scripting language is required for the feature to work. I had someone ask me how I did it, so I thought I would share the code.

Demo of the CSS gallery

It’s simple, clean and affective.

CSS Image Gallery Code

Download

Any probs? Let me know. I’m not offering full-support on this feature, but if you have any queries, i’ll do my best to assist.

Centering Text Vertically With CSS

Maruf — Mon, 15 Sep 2008 22:37:39 +0000

CSS can be extremely odd some times, and vertically centralizing text in CSS is one of those occasions which makes me think that…

Centering text horizontally within a div is extremely straight forward. All you need to to do is use the text-align:center property. But for some reason, there isn’t an easy remedy to centralize text vertically with CSS. It’s easily accomplished with tables, but as web development has progressed, the use of tables is now frowned upon by the web geeks (unless you’re displaying tabular data).

Admittedly, aligning text vertically central is not a feature I require a lot of the times, but I do need it now and then. For instance, I needed it this morning…

Example for centering text vertically

Below is an image of a navigation bar. I’ve added the border just for visual ease (it’s not part of the design). Ideally, i’d like the “360-degree feedback” link vertically central with in its container, so it’s not floating at the top, touching the border.

Like this…

The Solution

Here’s the code I used- I’ve tested it in I.E 6/7 and Firefox 2/3.

/* dark blue ---*/
#contentleft_btnsdarkblue{

background:url('images/button4.jpg') left no-repeat;

padding-left:35px;

height:60px;

display: table;

#position: relative;

overflow: hidden;

}
#contentleft_btnsdarkblue a{

color:#004064;

}
/* light blue ---*/
#contentleft_btnslightblue{

background:url('images/button1.jpg') left no-repeat;

padding-left:35px;

height:60px;

display: table;

#position: relative;

overflow: hidden;

width:160px;

}
#contentleft_btnslightblue a{

color:#009FE0;

}
.contentleft_btntxt{

#position: relative;

#top: -50%

}
.contentleft_vertical{

#position: absolute;

#top: 50%;display:

table-cell;

vertical-align: middle;

width:160px;

}



360-degree feedback






Personal Impact Assessment



[/pre]
For ease, you can download the Centering Text Vertically With CSS code.

Using Different CSS Stylesheets For Different Browsers

Maruf — Mon, 01 Sep 2008 19:32:46 +0000

I’ve been crunching through a lot of CSS this week, and on occasion I’ve had to overcome the classic CSS battle between Firefox and I.E. It’s no secret that Internet Explorer and Firefox tend to disagree on certain elements in which they render CSS properties. So while everything may line up perfectly using one browser, it can look ill-aligned in another. That’s when developers tend to rely on CSS browser hacks.

In general, you should try to avoid using CSS browser hacks and/or loading different stylesheets for specific browsers as fluently as possible, because it’s not good practice. In fact, most good CSS developers should be able to avoid CSS browser hacks/alternative CSS loading. However, on rare occasions, it’s required to achieve a perfect result.

CSS for specific browsers

IE-Only stylesheet

View Code CSS

1
2
3