Thursday, May 21, 2009

CSS Property: white-space


White Space (CSS Property) - white-space: { normal | nowrap | pre | pre-line | pre-wrap | inherit };

Description

This property controls the handling of whitespace inside an element. Whitespace is a collective name for one or more occurrences of the characters space, tab, line feed, carriage return, and form feed. Typically, within an HTML element, user agents will collapse a sequence of whitespace characters into a single space character.

Note that this property only handles whitespace characters; a common beginner’s mistake is to try to use it to prevent floated elements from dropping down if there isn’t enough room on a
line.

Example

This style rule makes elements that belong to the "poetry" class retain and render all
whitespace in the document markup:

<code class="css">.poetry {
white-space: pre;
}</code>

Value

normal
A value of normal dictates that sequences
of whitespace will collapse into a single space character. Line
breaks will occur wherever necessary to fill line boxes.
nowrap
Specifying nowrap ensures that sequences of
whitespace will collapse into a single space character, but line
breaks will be suppressed.
pre
Specifying pre ensures that sequences of
whitespace won’t collapse. Lines are only broken at new lines in the
markup (or at occurrences of "\a" in generated
content).
pre-line
This value will cause sequences of whitespace to collapse into a
single space character. Line breaks will occur wherever necessary to
fill line boxes, and at new lines in the markup (or at occurrences
of "\a" in generated content). In other words,
it’s like normal except that it’ll honor
explicit line breaks.
pre-wrap
Specify pre-wrap to ensure that sequences
of whitespace won’t collapse. Line breaks will occur wherever
necessary to fill line boxes, and at new lines in the markup (or at
occurrences of "\a" in generated content). In
other words, it’s like pre except that it’ll
wrap the text at the end of line boxes.

Compatibility

Internet Explorer: 5.5,6.0.7.0 (Partial)

Firefox 1.0,2.0,3.0 (Partial)

Safari 1.3,2.0,3.0 (Full)

Opera 9.2 (Partial) ,9.5 (Full)

Internet Explorer for Windows versions up to and including 7 don’t support the values
pre-line or pre-wrap. The values normal and pre behave like pre-wrap on textarea elements. The value nowrap behaves like pre-line on textarea elements.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

Firefox versions up to and including 2 don’t support the values pre-line and pre-wrap (although -moz-pre-wrap is similar to the latter). The values normal, nowrap, and pre behave like pre-wrap on textarea elements.

Opera 9.2 and prior versions don’t support the value pre-line. The values normal and pre behave like pre-wrap on textarea elements. The value nowrap behaves like pre-line on textarea elements.

CSS Property - Clip


Clip (CSS Property) - clip: {shape | auto | inherit};

Description

For all the absolutely positioned elements this property sets the clipping region. Any part of an element that would render outside the clipping region will be invisible. This includes the content of the element and its children, backgrounds, borders, outlines, and even any visible scrolling mechanism.

Clipping may be further influenced by any clipping regions that are set for the element’s ancestors, and whether or not those have a visibility property whose value is something other than visible. Clipping may also occur at the edges of the browser window, or the margins of the paper (when printing).

The default clipping region is a rectangle with the samedimensions as the element’s border box.

Example

This style rule assigns a clipping region of 200×100 pixels for the element with ID "tunnel-vision". The upper left-hand corner of the clipping region is at position (50,50) with respect to the element’s box:

<code class="css">#tunnel-vision {
width: 400px;
height: 200px;
clip: rect(50px, 250px, 150px,50px);
}</code>

Value

If the value is specified as auto, no clipping will be applied.

The only shape value that’s allowed in CSS2.1 is a rectangle, which must be specified using the rect() functional notation. The function takes four comma-separated arguments—top, right, bottom, and left—in the usual TRouBLe order. Each argument is either auto or a length, and negative length values are allowed. The top and bottom positions are relative to the top border edge of the element’s box. The left and right positions are relative to the left border edge in a left-to-right environment, or to the right border edge in a right-to-left environment. When specified as auto, the position is that of the corresponding border edge.

Note that the interpretation of positions specified in the rect() functional notation changed between CSS2 and CSS2.1. In CSS2, each value specified the offset from the corresponding border edge.

Compatibility

Internet Explorer: 5.5,6.0.7.0 (Partial)

Firefox 1.0,2.0,3.0 (Full)

Safari 1.3,2.0,3.0 (Full)

Opera 9.2,9.5 (Full)

Internet Explorer for Windows versions up to and including 7 do not support the recommended
syntax for the rect() notation. However, they do support a deprecated syntax where the arguments are separated by whitespace rather than commas.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

Tuesday, May 12, 2009

CSS Sprites


As a web designer, Are you still slicing your images (icons, buttons, layout and mouse over images) and think that this slicing will make pages load faster. All that technique did was of dark ages of www and fool the eye to make it look like the page was loading faster by loading bits and pieces all over at once. Each one of those images is a separate HTTP-Request, and the more of those, the less efficient your page is.

Let’s look at a quote from the article “Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests” by Tenni Theurer on the Yahoo! User Interface Blog.

Every single image, whether it’s an <> tag or an background-image from your CSS is a separate HTTP-Request, so you can image how quickly those requests can wrack up.


So what are the CSS Sprites? CSS Sprite is a single image containing set of images used in website the only thing is to place your image set in css sprite and on one image at a time and off all other images. The image will load at once instead of loading all images one by one and save not only HTTP requests but also total size of images.

You can quickly preview the CSS-Sprite example in action by downloading the source code from here



The comparison of old sliced images and this CSS-sprite images load time according to the above example is as follows.
OLD Slicing technique (10 HTTP Requests, 21KB image size) CSS Sprite Method (1 HTTP Request, 13KB image size)








Friday, May 8, 2009

Clean CSS Writing

As a css designer. "How to write CSS" is a question from beginners but "How to write a Clean & optimized CSS" is a question often asked by the experts. Here is My coding style sample with the help of which you can understand and off course able to write the CSS in clean and optimized way and I also share some tips to clean your CSS after finalyzing your css code.

Clean your CSS through code
In case of huge websites I always use different css files for achieving different purposes (i.e. type.css, theme.css and default.css). But in case of small or medium website in use only one css and segregate my css file into following areas / sections

1. global reset
---------------------
- Under this section, I always reset the box issues of IE by grouping the html box tags in the scene of padding, margins and fonts.
- Also I always apply same
fonts
colors
boxes
positioning &
widths
under this section by grouping the 3rd level TOC classes i.e. In case of width .w100,#mHdr,#mMnu,#mCnt,#mFtr{Width:100%;}

2. global hacks
-----------------------
The browser specific hacks which i have to use in almost every website include in this section i.e. PNG-IE hack, hack for outlining, opacity and curves are placed here.

3. layout basic
----------------------
- The website first level TOC placed there i.e. wrapper, header, menu, content, news, footer e.t.c. & only floats, backgrounds and borders are entertained here.

4. layout deep
----------------------
- The website all levels TOC inclusive of first one which is already entertained in Layout Basic placed here i.e. In case of footer the main id is already defined in layout basic i.e #mFtr now I placed all child classes here
A simple example for it is footer griding

#mFtr .mnu (for footer menu container)
#mFtr .mnu ul, #mFtr .mnu ul li (for footer menu styling treatment individually)
#mFtr .mnu ul li a (footer menu links)

#mFtr .cR (copyrighting area / Privacy policy or terms and conditions styling treatment)
#mFtr .cR a (footer copyrighting links)

5. fonts
-----------
All fonts sizes, family and decorations are entertained here.

6. datasets
----------------
All datasets properties along with the hover effects and speeding effects are entertained under this section

7. forms
------------
This section is dedicated for the form elements. All form properties are entertained here.

CONCLUSION
*****************
Above segregation will help me to avoid redundancy and repetition of css code. for instance. I never use float:left / right in each and every class which is most common in practice instead of this i group all classes and apply the style float:left by this way a lot of extra css space is cleaned. Same in the case of widths, colors and font properties are applied. Also I never use font and color properties together in a class. Instead of this I always call both classes in my html so that i can use same font in different color or different colors in same fonts without making extra classes. NOTE that this is not only in the case of just fonts or colors. This is the main reason to utilize the sections defined above appropriately. In the end I always remove all comments and space areas by using dreamveaver find and replace option. css white space optimization

Clean your css after code
You can check
unused CSS selectors with the help of firefox extension https://addons.mozilla.org/en-US/firefox/addon/5392
You can use csstidy to optimize and compress your css. You can download css tidy from http://sourceforge.net/project/showfiles.php?group_id=148404&package_id=166585 OR you can use its online optimizer from http://floele.flyspray.org/csstidy//css_optimiser.php


Reblog this post [with Zemanta]

Tuesday, April 28, 2009

CSS Troubleshooting

Many people asked me about CSS troubleshooting / debugging. This article is specifically written for those who are coding using DIV approach but facing issues and they don't know how to trouble shoot the issues.

  1. The first and simplistic method is using Adobe Dreamweaver CSS Panel. Just click on your HTML code and you will able to find all selectors and their values in CSS Panel. You can find CSS Panel from Menu Bar > windows > CSS Style (Shift + F11).

  2. Second Method is also a simple one, Use multi level selectors for defining outlines by uncommeting following code one by one/* * { outline: 2px dotted red }

    /* * { outline: 1px solid red }*/
    /* * * { outline: 2px dotted green }*/
    /* * * * { outline: 2px dotted orange }*/
    /* * * * * { outline: 2px dotted blue }*/
    /* * * * * * { outline: 1px solid red }*/
    /* * * * * * * { outline: 1px solid green }*/
    /* * * * * * * * { outline: 1px solid orange }*/
    /* * * * * * * * * { outline: 1px solid blue }*/

  3. Third Method is commonly used by web designers and developers. "Firefox Addon - Web Developer Toolkit" You can download it by following the link above . You can troubleshoot your CSS by enable / disable CSS OR Apply Border Function.

  4. The most widely and my favorite one "Firefox Addon - Firebug", You can download it by following the link above OR visit its official website to explore what can you do with firebug http://getfirebug.com/. You can check any website presentation, user behaviour code , edit it and can even duplicate it with the help of this tool. Firefox also have a Lite version for other browsers such as I.E, Opera and Safari e.t.c you can download it from http://getfirebug.com/lite.html



Reblog this post [with Zemanta]