Archive for the ‘css’ Category

Cross Browser css hacks that every designer and developer should know

In this post I am going to write about a big problem that every developer or designer face. Cross browser compatibility problem. The css hacks I am going to show are not always validated by w3c but in certain situations they are lifesavers. The browsers I am going to cover are IE, firefox, chrome, safari and opera.

First I am starting with notorious IE . Most of the time designer or a developer finds that all the browsers are showing the design perfectly, except IE. Even Different versions of IE are showing different types of design bugs. The easiest way is to make different css for different IE and call them seperately in page. The example are

<!–[if IE 8]> <link rel="stylesheet" type="text/css” href=”css/ie8.css”><![endif]–> <!–[endif]–><!–[if IE 8]> <link rel=”stylesheet” type=”text/css”  href=”css/ie8.css”><![endif]–>
<!–[if IE 7]><link rel=”stylesheet” type=”text/css”  href=”ie7.css”><![endif]–>
<!–[if IE 6]><link rel=”stylesheet” type=”text/css”  href=”ie6.css”><![endif]–>

Firstly our normal css will load then these conditional css will load and will overwrite the default css classe, which are common in those conditional css files.

Now if we have a single css and we want to apply css hacks in that file only.

IE6

.myhack{width:100px; _width:110px;}

IE7

.myhack{width:100px;#width:110px;}

IE8

.myhack{width:100px;width:110px/}

Chrome and Safary

@media screen and (-webkit-min-device-pixel-ratio:0) {

.myhack { background-color: #FF0000; }
#myId {color: #0000FF;}
}
Firefox
@-moz-document url-prefix() {
.myhack{width:100px; }
}


Advertisements

5 important css tips for Web designers and Developers

These css tips are not very common to find. But very often we need to use these css properties. Sometimes they become real headache if we do not know how to use these properties properly.

1. Set body font-size to 62.5%  if you are using em for fonts.

If you would like to use relative units (em) for your font sizes, declaring 62.5% for the font-size property of the body will make it easier to convert px to em. By doing it this way, converting to em is a matter of dividing the px value by 10 (e.g. 24px = 2.4em).

body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}

2. Removing outline for Safari and chrome input text boxes

When you focus (:focus) on an input element, perhaps you have noticed that Safari adds a blue border around it (and Chrome, a yellow one).

If you would like to remove this border outline, you can use the following style rule (this removes the outline from text fields):

input[type=”text”]:focus {
outline: none;
}

3. Target IE6 and IE7 Browsers with special hacks

The code below will change the background-color of divs depending on what browser the user is viewing the web page under. Since * cascades down to IE7 and below, we use _ after that declaration so that IE6 (and below) has a different background color from IE7.

div {
background-color: #999; /* all browsers */
*background-color: #ccc; /* add a * before the property – IE7 and below */
_background-color: #000; /* add a _ before the property – IE6 and below */
}

4. Transparency/Opacity in All Major Browsers

div {
/* standards-compliant browsers */
opacity:0.7;

/* The following is ignored by standards-based browsers */
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=70)”;  /* IE8 */
filter: alpha(opacity=70); /* IE 5-7  */
}

5.  !important to Override Normal CSS Precedence Rules

In CSS, when two properties apply to the same element, the one that is farther down the stylesheet is the one that will take effect. However, by using !important at the end of a property value, this can be changed.

Let’s take, for example, this set of style rules:

h1 { color: green; }
h1 { color: red; }

The h1 element will have a red color with the CSS above.

If we wanted to change the style rule’s priority without changing the order of the property declaration, then we simply do the following:

h1 { color: green !important; }
h1 { color: red; }

Now, the <h1> element will be green.

These css properties are very often used but not very popular. Lets hope these tips are usefull to you.

5 tips to write better css

We can not deny the important role of css in controlling the look of any web application or software. Nowadays it does not matter whether you are a web designer or web developer , everybody should have the knowledge of css. Here are few tips for writing better css.

1.Use of  a Proper CSS Reset

If properly declared it can solve lots of cross browser problems. This should be declared at the very beginning of the css like

body, html{padding:0, margin:0;}

but this is not a full reset. There are many CSS reset codebases on the web that you can incorporate into your work like Eric Meyer reset

2.Using Shorthand Properties

Properly used shorthand propertis can solve lots of time and editing problem.

See this

#content {
margin-top: 50px;
margin-right: 0;
margin-bottom: 50px;
margin-left 0;
}

Now see this

#content {
margin: 50px 0;
}

you can see how much time you can save if you write css like this.

Another example

background-image: url(background.png);
background-repeat: repeat-y;
background-position: center top;

Shorter one

background: url(background.png) repeat-y center top;

3.Using Color Names Instead of Hexadecimal

color: red

technically it is not wrong but you’re essentially saying that the browser should display what it thinks red is. This can create cross browsing problem in future. It is always safe to declare it like this

color: #ff0000;

You can use a color cheatsheet that provides a preview and the hex value of a color.

4. Combining the common attributes

See this

#wrapper-1 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}
.wrapper {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}

Now see this

#wrapper-1, .wrapper-2 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}

see how much space and time we have saved.

5.Always Provide Fallback Fonts

Font stacks are a way for developers to provide fallback fonts for the browser to display if the user doesn’t have the preferred font installed.

For example:

#selector {
font-family: Helvetica;
}

Can be expanded with fallback fonts as such:

#selector {
font-family: Helvetica, Arial, sans-serif;
}

Now, if the user doesn’t have Helvetica, they can see your site in Arial, and if that doesn’t work, it’ll just default to any sans-serif font installed.
By defining fallback fonts, you gain more control as to how your web pages are rendered.

Hopefully you have found these tips useful. En