Monday, June 22, 2009
Thursday, June 11, 2009
blockquotes CSS
Source Code is:
<head>
<style>
blockquote{background:transparent url(quoleft.gif) left top no-repeat;}
blockquote .blockDiv{padding:0 48px;background:transparent url(quoright.gif) right bottom no-repeat;}
.blockDiv{width:300px;font:11px/1.1em Arial, Helvetica, sans-serif;color:#777;text-align:justify;}
</style>
</head>
<body>>
<blockquote cite="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.1">
<div class="blockDiv">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</blockquote>
</body>
Download the blockquote source code from here
There’s a simple trick at work here. CSS backgrounds are extremely powerful but in CSS2 only one background can be applied to any single element. The blockquote effect requires two background images, one for the quote mark on the left hand side and one for the one on the right. The additional nested <div> </div> allows us to do this, by applying one background image to the <blockquote></blockquote> and one to the <div> </div>.
The padding is applied to the <div> </div> rather than the <blockquote></blockquote> because the <div> </div> needs to stretch the entire width of the <blockquote></blockquote> in order for the background image to appear in the right place. The images are 38 pixels wide, so a padding is applied to the left and right hand sides of the <div> </div> to allow space for the images and give an extra 10 pixels of whitespace.
You can see the technique being used by downloading the free source code from here.
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 aline.
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
normaldictates that sequences
of whitespace will collapse into a single space character. Line
breaks will occur wherever necessary to fill line boxes. nowrap- Specifying
nowrapensures that sequences of
whitespace will collapse into a single space character, but line
breaks will be suppressed. pre- Specifying
preensures 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 likenormalexcept that it’ll honor
explicit line breaks. pre-wrap- Specify
pre-wrapto 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 likepreexcept 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).
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.
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.
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]](http://img.zemanta.com/reblog_e.png?x-id=2aae7c6c-4491-4d85-b500-f8a52278c73d)
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.
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=538c035e-64a2-4837-bfd8-a296a2e93fd0)
- 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).
- 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 }*/ - 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.
- 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
The cascade
Style sheets may have three different origins: author, user, and user agent.
Note: that the user may modify system settings (e.g. system colors) that affect the default style sheet. However, some user agent implementations make it impossible to change the values in the default style sheet.
Style sheets from these three origins will overlap in scope, and they interact according to the cascade.
The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence.
By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is reversed, however, for "!important" rules. All user and author rules have more weight than rules in the UA's default style sheet.
Cascading Order
To find the value for an element/property combination, user agents must apply the following sorting order:
1. Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all @media rules containing the declaration and on all links on the path through which the style sheet was reached.
2. Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:
1. user agent declarations
2. user normal declarations
3. author normal declarations
4. author important declarations
5. user important declarations
3. Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
4. Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.
Apart from the "!important" setting on individual declarations, this strategy gives author's style sheets higher weight than those of the reader. User agents must give the user the ability to turn off the influence of specific author style sheets, e.g., through a pull-down menu. Conformance to UAAG 1.0 checkpoint 4.14 satisfies this condition
- Author: The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.
- User: The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behaves as if it did).
- User agent: Conforming user agents must apply a default style sheet (or behave as if they did). A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See A sample style sheet for HTML for a recommended default style sheet for HTML documents.
Note: that the user may modify system settings (e.g. system colors) that affect the default style sheet. However, some user agent implementations make it impossible to change the values in the default style sheet.
Style sheets from these three origins will overlap in scope, and they interact according to the cascade.
The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence.
By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is reversed, however, for "!important" rules. All user and author rules have more weight than rules in the UA's default style sheet.
Cascading Order
To find the value for an element/property combination, user agents must apply the following sorting order:
1. Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all @media rules containing the declaration and on all links on the path through which the style sheet was reached.
2. Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:
1. user agent declarations
2. user normal declarations
3. author normal declarations
4. author important declarations
5. user important declarations
3. Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
4. Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.
Apart from the "!important" setting on individual declarations, this strategy gives author's style sheets higher weight than those of the reader. User agents must give the user the ability to turn off the influence of specific author style sheets, e.g., through a pull-down menu. Conformance to UAAG 1.0 checkpoint 4.14 satisfies this condition
Monday, April 27, 2009
A simple solution for IE6 PNG support is
HTML Code:
< div class="iePng_logo" id="ieBg"> <img src="images/logo_png.png" class="ieHide" /> </div>
CSS Code:
.iePng_logo {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo_png.png',sizingMethod='scale'); width:307px; height:34px;}
.iePng {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/screenshot.png',sizingMethod='scale'); width:438px; height:230px;}
.ieHide {border:0 solid #fff; _display:none;}
#ieBg {border:0;}
You can check its working demo from the following URL, Check top left logo in all browsers its transparent PNG, you can save it and check its transparency
http://expertsdesk.net/novotech/
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=9a0f3435-c904-42e5-8883-7b8346dcfe34)
HTML Code:
< div class="iePng_logo" id="ieBg"> <img src="images/logo_png.png" class="ieHide" /> </div>
CSS Code:
.iePng_logo {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo_png.png',sizingMethod='scale'); width:307px; height:34px;}
.iePng {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/screenshot.png',sizingMethod='scale'); width:438px; height:230px;}
.ieHide {border:0 solid #fff; _display:none;}
#ieBg {border:0;}
You can check its working demo from the following URL, Check top left logo in all browsers its transparent PNG, you can save it and check its transparency
http://expertsdesk.net/novotech/
Friday, April 24, 2009
CSS for JQuery Plugins
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
If you wanted to change the layout of JQuery plugins according to your design, then you have to learn from where to search JQuery Plugins first
Enter in JQuery world / Search for the most suitable plugins
Open the JQuery official website from http://jquery.com/ then click on plugins section from where you can search the appropriate plugin. The direct link for JQuery plugins is http://plugins.jquery.com/. Here you can find thousands of attractive plugins.
Explore and Preview the plugins in action
If you wanted to change the layout of JQuery plugins according to your design, then you have to learn from where to search JQuery Plugins first
Enter in JQuery world / Search for the most suitable plugins
Open the JQuery official website from http://jquery.com/ then click on plugins section from where you can search the appropriate plugin. The direct link for JQuery plugins is http://plugins.jquery.com/. Here you can find thousands of attractive plugins.
Explore and Preview the plugins in action
- For instance we are searching for menu plugin. Enter in menu category or search menu from search box. You will find the list of JQuery menus.
- Open differnet menus in new windows, Click on "Try out demonstration".
- Here you will find the "Demonstration page", You can check the plugins output
- Follow the "Download Example" page to download the source code (in zip format normally)
- Folder structure of the source code varies. But the common used folder structure of JQuery plugins is as follows
- "index.html" / "demo.html" file
- "css" folder includes the css of that particular plugin
- "images" folder includes all the images used by the plugin and referent from HTML and/or CSS files
- "include" / "js" folder this folder contains all javascripts used by that particular plugin, NOTE: Move Jquery.js (main file 1.1 - 1.3.2) if you are using multiple JQuery plugins from every plugins folder to some other location and refer all plugins to that file.
- Now copy the plugin folder to your root folder
- Considerable changes are < head > section for metadata reference locations
- < script > section (embeded) if any
- and < div > section (finally)
Thursday, April 23, 2009
CSS - !important rules
Cascading Style Sheets cascade. This means that the styles are applied in order as they are read by the browser. The first style is applied and then the second and so on. What this means is that if a style appears at the top of a style sheet and then is changed lower down in the document, the second instance of that style will be the one applied, not the first. For example, in the following style sheet, the paragraph text will be black, even though the first style property applied is red:
- p { color: #ff0000; }
- p { color: #000000; }
- p { color: #ff0000 !important; }
- p { color: #000000; }
tag with color red and than you are assigning some container's
color green with !important rule applying in it and in the end of CSS again you are applying CSS rule to P tag with color black. What do you expect from browsers for exact output? OR How User agents will able to know what do you wanted to do?
CSS - The three Bigs
In Meta Data Section of HTML portion, where you include external referral code for styling or adding user behavior to the website, You can use CSS code in following three ways which is called the three bigs CSS documents.
Inline styles are styles that are written directly in the tag on the document. Inline styles affect only the tag they are applied to
2) Embedded CSS / Embedded Styles
Embedded styles are styles that are written in a similar document within style tag under head tag Embedded styles affect only the page / document where they are applied to
3) External CSS / External Styles
External styles are styles that are written in a separate document and then attached to various Web documents. External style sheets can affect any document they are attached to
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=473e3f92-aac2-4391-b7d8-92ae058ea7ba)
- Inline CSS / Inline Styles
- Embedded CSS / Embedded Styles
- External CSS / External Styles
Inline styles are styles that are written directly in the tag on the document. Inline styles affect only the tag they are applied to
2) Embedded CSS / Embedded Styles
Embedded styles are styles that are written in a similar document within style tag under head tag Embedded styles affect only the page / document where they are applied to
3) External CSS / External Styles
External styles are styles that are written in a separate document and then attached to various Web documents. External style sheets can affect any document they are attached to
link vs @import
Conclusion: Always use LINK instead of @import if you want stylesheets to download in parallel resulting in a faster page.
LINK vs. @import
There are two ways to include a stylesheet in your web page. You can use the LINK tag:
< rel="'stylesheet" href="’style.css’">
Or you can use the @import rule:
<>
@import url('style.css');
< /style >
I prefer using LINK for simplicity—you have to remember to put @import at the top of the style block or else it won’t work. It turns out that avoiding @import is better for performance, too.
@import @import
I’m going to walk through the different ways LINK and @import can be used. In these examples, there are two stylesheets: style.css and type.css. Each stylesheet is configured to take two seconds to download to make it easier to see the performance impact. The first example uses @import to pull in these two stylesheets. In this example, called @import @import, the HTML document contains the following style block:
<>
@import url('style.css')
@import url('type.css');
< /style >
If you always use @import in this way, there are no performance problems, although we’ll see below it could result in JavaScript errors due to race conditions. The two stylesheets are downloaded in parallel, as shown in Figure 1. (The first tiny request is the HTML document.) The problems arise when @import is embedded in other stylesheets or is used in combination with LINK.
Figure 1. always using @import is okay
LINK @import
The LINK @import example uses LINK for style.css, and @import for type.css:
<> rel="stylesheet' type="text/css" href="style.css">
<>
@import url('type.css');
< /style >
In IE (tested on 6, 7, and 8), this causes the stylesheets to be downloaded sequentially, as shown in Figure 2. Downloading resources in parallel is key to a faster page. As shown here, this behavior in IE causes the page to take a longer time to finish.
Figure 2. link mixed with @import breaks parallel downloads in IE
LINK with @import
In the LINK with @import example, style.css is inserted using LINK, and style.css has an @import rule to pull in type.css:
in the HTML document:
< rel="'stylesheet'" type="'text/css'" href="'style.css'">
in style.css:
@import url('type.css');
This pattern also prevents the scripts from loading in parallel, but this time it happens on all browsers. When we stop and think about it, we shouldn’t be too surprised. The browser has to download style.css and parse it. At that point, the browser sees the @import rule and starts to fetch type.css.
Figure 3. using @import from within a LINKed stylesheet breaks parallel downloads in all browsers
LINK blocks @import
A slight variation on the previous example with surprising results in IE: LINK is used for style.css and for a new stylesheet called proxy.css. proxy.css is configured to return immediately; it contains an @import rule for type.css.
in the HTML document:
< rel="stylesheet” type=" href="style.css">
< rel="stylesheet" type="text/css" href="proxy.css">
in proxy.css:
@import url('type.css');
The results of this example in IE, LINK blocks @import, are shown in Figure 4. The first request is the HTML document. The second request is style.css (two seconds). The third (tiny) request is proxy.css. The fourth request is type.css (two seconds). Surprisingly, IE won’t start downloading type.css until style.css finishes. In all other browsers, this blocking issue doesn’t occur, resulting in a faster page as shown in Figure 5.
Figure 4. LINK blocks @import embedded in other stylesheets in IE
Figure 5. LINK doesn't block @import embedded stylesheets in browsers other than IE
many @imports
The many @imports example shows that using @import in IE causes resources to be downloaded in a different order than specified. This example has six stylesheets (each takes two seconds to download) followed by a script (a four second download).
<>
@import url('style.css');
@import url('type.css');
@import url('c.css');
@import url('d.css');
@import url('e.css');
@import url('f.css');
< /style >
< src="'one.js'" type="'text/javascript'">< /script >
Looking at Figure 6, the longest bar is the four second script. Even though it was listed last, it gets downloaded first in IE. If the script contains code that depends on the styles applied from the stylesheets (a la getElementsByClassName, etc.), then unexpected results may occur because the script is loaded before the stylesheets, despite the developer listing it last.
Figure 6. @import causes resources to be downloaded out-of-order in IE
LINK LINK
It’s simpler and safer to use LINK to pull in stylesheets:
< rel="'stylesheet'" type="'text/css'" href="'style.css'">
< rel="'stylesheet'" type="'text/css'" href="'type.css'">
Using LINK ensures that stylesheets will be downloaded in parallel across all browsers. The LINK LINK example demonstrates this, as shown in Figure 7. Using LINK also guarantees resources are downloaded in the order specified by the developer.
Figure 7. using link ensures parallel downloads across all browsers
These issues need to be addressed in IE. It’s especially bad that resources can end up getting downloaded in a different order. All browsers should implement a small lookahead when downloading stylesheets to extract any @import rules and start those downloads immediately. Until browsers make these changes, I recommend avoiding @import and instead using LINK for inserting stylesheets.
Sunday, April 12, 2009
Rounded corner CSS
Refer to the image above. Are you facing problems with rounded corner code in XHTML/CSS here is its solution please download the zip file and enjoy CSS coding
Subscribe to:
Posts (Atom)