Weblink India.Net – Blogs

Ideas & Inspiration for web design and web development

Archive for the ‘CSS’ Category

CSS Optimization for a Faster Website

Posted by weblinkindia on September 2, 2010

A website’s popularity depends as much on its design and content as on its user-friendliness. A major aspect of this is the loading time of a website. Now you may ask, how does this affect the viewership? Imagine surfing the internet and coming across a website related to a highly interesting topic but the only glitch is that it is taking too long to load properly. Needless to say this compels you to close the page and search somewhere else. As for designers who make websites with elaborate coding, every effort can fall flat if their websites do not load properly or run too slow on servers. Although there are many factors that come together to increase the downloading time but today we discuss a major factor here and that is CSS optimization.

CSS or Cascading Style Sheets control the designing aspect of a website and if optimized properly these can help in the formation of a well-designed website that loads quickly to show its content. Permitting browsers to directly access information from the .css files that are related to the styles, these sheets eliminate the need for repetitive information reading, each time the page is loaded.

  1. Remove redundant coding and combine scattered codes at one place.
    Through smart coding you can drastically reduce the loading time of a webpage on a computer and if the discrete codes are combined into one then rendering occurs earlier as compared to pages with redundant coding. Also, some properties like CSS !important override should be used only if required.
  2. Use CSS Sprites.
    This enables you to store multiple images at one place and allows faster webpage loading. The combined segment can then be displayed selectively, using CSS properties of background-image and background-position.
  3. Use CSS Optimizer Tools like CleanCSS and YUI compressor to delete things like:
    • Unnecessary characters
    • Whitespaces
    • Useless properties
    • Repetitive selectors
  4. Keep all Cascading Style Sheets at one place or in a separate external file.
    This is done to trim down the requests sent to the HTTP Server and having a single file means that only one request will be sent, resulting in faster downloads to the client’s computer.
  5. Place CSS on the top of pages to load them faster.
    This is based on the fact that the CSS scripts placed here will be rendered first because the parallel downloads are blocked by scripts. This also prevents the display of blank white screen and content that has not been styled.
  6. Some other steps that can be taken include:
    • Grouping styles that are alike
    • Use CSS shorthand
    • Deleting unnecessary line breaks and comments
    • In many browsers using ‘@import’ causes WebPages to slow down so use this sparingly or better still use ‘link’

A cleaner code with smart placement definitely translates into the speedy rendering of WebPages on a server. With the further support of minification tools, you can easily increase the number of time your website is viewed by people. We will be back soon with more tips on how to make your website load faster and become more popular with web surfers. Watch this space!

Posted in CSS | Tagged: , , | Leave a Comment »

CSS2 and CSS3: The Difference

Posted by weblinkindia on August 23, 2010

Cascading Style Sheets or CSS manage the whole designing of a website with one-click changes. The latest version of CSS is the CSS3 version which basically differs from CSS2 in the incorporation of Modules and other changes. Modules enable the designing to be done in a lesser time with more ease while updating individual features and specifications. The CSS3 version supports many more browsers than CSS2, but be sure to test it on all operating systems and browsers.
Other major changes/additions include:

  • New Combinator
  • New CSS Selectors
  • New Pseudo-elements
  • New Style properties

Now let us discuss these in detail.

Combinator
New addition of General Sibling Combinator is done to match sibling elements of a given element through tilde (~) Combinator.

CSS Selectors
While CSS2 had ‘simple selectors’, the new version calls them the components as ‘a sequence of simple selectors’.

Pseudo-Elements
Many Pseudo Elements have been added that allow in-depth yet easy styling and a new convention of double colons ‘::’ has been introduced.

Style Properties

New Background Style Properties
Multiple Background images can be layered in the box using different elements like background image, position and repeat.

Border Style
Styling of borders has been extended to images and rounded designs which includes creating image of the borders and then automatically apply image to the borders through CSS.

Additions in Properties

  • Border-radius, image-source, image-slice, and the values for width outset and stretch have been added in CSS3.
  • Properties for managing boxes like shadowing, wrapping and breaking have been added.
  • CSS3 has done away with complex structures for div tag and makes it easy for hassle free designing of multiple table-less columns. This can be simply done by putting in the number of columns in the browser that need to be added in the body element along with their width, color and height to make the text flow through the columns with ease.

New Background Style Properties

  • With the addition of the new ‘local’ value, if the element has a scroll bar then the background scrolls with its content.
  • Background-clip, origin, size and style properties have been added.
  • Background shorthand property has been added in the size and origin properties.
  • The changes to previous Background Style Properties include:
    • Repeat property now has two values name space and round that space the tiled image in the box uniformly and rescales background images to tile it multiple time in the box.

More New additions

  • Modules for grid creations and template layout.
  • User interface module has been updated with the feature of adding/designing many elements.
  • Ruby and Paged Media module allow more support for languages, paged media and with flexibility in using style sheets by Media Queries is also present.

CSS versions just keep getting better with time which means improves the programming platform for developers resulting in faster and more efficient website designing. CSS3 mainly gives a simple interface that can be worked by beginners as well for making better and more appealing website styles.

Posted in CSS | Tagged: | Leave a Comment »

Internet Explorer and CSS Compatibility Issues

Posted by weblinkindia on July 15, 2010

Cascading Style Sheets, more commonly known as CSS, is used to denote the look as well as the formatting of a document, written in markup languages like HTML and others. However the most commonly used browser, i.e. Internet Explorer hasn’t been all that happy about CSS properties and has constantly faced compatibility problems with it. Microsoft, the father of Internet Explorer has often been criticized for ignoring some of the most useful and important CSS properties, which could have made the web experience on IE very unique and special. Some of the common compatibility issues between IE and CSS are listed below.

Outline
The ‘outline’ property offered by CSS, has been very useful in determining the source of the problem or error in the web coding program. This property enables one to put border around the block level elements, which are at fault. However neither Internet Explorer 6 nor 7 supports the CSS Outline property.

Empty-Cells
One of the most common CSS properties like Empty Cells is also not supported on the Internet Explorer. The Empty Cell Property applies to those elements that have their display in table-cell format. In such cases, while undertaking the dynamic repopulating of a table, if you don’t want to display the borders, background color, or background image on the empty cell, you can remove them by using ‘Use empty-cells: hide’.

Clip Property
Another simple and commonly known CSS property is the ‘Clip’. The Clip Property, allows the programmer to point out the invisible areas in an element. The common syntax of Clip looks like:

div.clipped  {

padding: 20px;

width: 400px;

height: 400px;

clip: rect(20px, 300px, 200px, 100px);

position: absolute;

}

However, neither Internet Explorer 6 nor its upgraded version7 supports this property.

Display
Thanks to the compatibility issues between IE and CSS, only one of the three values i.e. ‘Inline’, ‘Block’ and ‘None’ is used by programmers in designing a webpage. Apart from the usual properties, Display can also be modified with values like ‘inline-block’, ‘table’, ‘inline-table’, and ‘table-cell’, which can be pretty handy in resolving the specific layout issues.

Caption-Side
The Caption Side Property of the CSS enables the programmer to determine on what side of a table, the table’s caption would appear. The commonly accepted values for this property are listed as top, bottom, left and right. However, neither IE 6 nor 7 accept this property, and therefore the caption will always appear on the top of the table.

The ones listed above are some of the most common compatibility issues between IE and CSS, an in-depth analysis can reveal many other issues. Web Design India

Posted in CSS, Internet Explorer | Tagged: , | 1 Comment »

CSS differences in Internet Explorer

Posted by weblinkindia on November 28, 2009

With the coming of CSS, the world of web was refreshed and was breathed with a new life. Color, stylized fonts, borders, margins, etc. were used in order to make a web page or site attractive. There are several browsers on which web sites or pages are opened. The web developers had to test their work in different browsers so that everyone has access to their work. Internet Explorer or IE is the most accessed browsers but there are various differences in its 3 versions especially in their support of CSS.

Why designers should have knowledge of CSS differences?

Every site designed for promotion, aims to receive higher search engine rankings. For achieving it they need to apply numerous CSS tips. Here you are provided with some useful points or differences that are present in different versions of IE.

The major differences that are to be found in different versions of Explorer are:
>> Selectors & Inheritance
>> Property Support
>> Significant Bugs and Incompatibilities
>> Other Miscellaneous Techniques

Selectors & Inheritance:  Selectors are part of CSS techniques that help in optimization and saves on a lot of time. There are numerous kinds of selectors like Child Selectors, Chained Classes, Attribute Selectors, Adjacent Sibling Selectors and General Sibling Selectors. These selectors are supported by one browser and not supported by the other. All these selectors are supported by the latest versions of IE7 and 1E8 and not by IE6.

Property Support:  Different properties of CSS like Fixed-Position Elements, Transparent Border Color, Max-Height & Max-Width, Min-Height & Min-Width, Property Value “inherit”, Border Spacing on Table Cells, Rendering of Empty Cells in Tables, Vertical Position of a Table Caption, Clipping Regions Orphaned and Widowed Text in Printed Pages, Page Breaks Inside Boxes, Outline Properties, Alternative Values for the Display Property and Virtual Dimensions Determined by Position are not supported by all browsers. These properties are responsible for giving a webpage or website a new and appealing appearance. All these are supported by IE7 and IE8 and not by the older version, IE6.

Significant Bugs and Incompatibilities: There are various incompatibilities and bugs in IE6 and IE7 that a web designer must know in order to create a well-designed and optimized site.

Bugs in IE6:

  • It Doesn’t support styling of the element
  • Doesn’t support IDs and classes that begin with an underscore or hyphen.
  • It Offers only fractional support for @font-face
  • Dotted borders appear almost identical to dashed borders, etc.

    • Bugs in IE7:

  • List items for a list that is ordered, its layout will not increment their numbers
  • Offers only fractional support for @font-face.
  • List items don’t support all possible values for list-style-type
  • List items that have a specified list-style-image will not be able to display the floated image.

    • Apart from these many other bugs occur in different situations.

    Other Miscellaneous Techniques: The advanced techniques like Media Types for @import, Incrementing of Counter Values and Quote Characters for Generated Content are only supported by IE8.

    Knowledge of these differences will help a web site developer in framing a browser friendly site that will be supported by all three versions of Internet Explorer. Our CSS guideline will help your site acquire higher search engine rankings.

    Posted in CSS, Internet Browser | Tagged: , , | Leave a Comment »

    Advance CSS optimization tips and techniques

    Posted by weblinkindia on November 14, 2009

    CSS optimizationIn the present scenario, where ‘Time is Money’, people hardly wait for the sites to open. Internet is flooded with information laden sites, if one takes time to load, people switch to other. In order to avoid this to happen to your webpage or site, various CSS optimization techniques can be improvised. CSS optimization is a process that aims at reducing the extra load of WebPages or Sites, which in turn lead to their speedy loading and hence help them escalate the search engine rankings. It is updated at recurrent intervals of time so as to provide you with tips to design a site that is easy to load.

    Tips and techniques of Advanced Optimization: -
    >> Smaller style sheets
    >> CSS Sprites
    >> CSS layout and positioning control
    >> Faster tables
    >> Substitution

    Smaller style sheets :-   To minimize the loading time of the websites one has to reduce the size of the style sheets. This can be done by using Shorthand Properties, selecting and grouping similar classes that have same CSS declarations.

    > Group Selectors:-
    Selector is one of the CSS syntax, which is usually the HTML tag that we wish to define. By selecting the similar group of selectors we save a lot of time. We separate each selector with the help of a comma.
    > Selector Specificity:-
    It is a method, which is used to determine as to which set of rules should be given priority in CSS when more than one rule can be applied to an element. By using similar level of rules leads to code redundancy and style clashes. If a code is reduced by merging its common properties, lot of weight of style sheets can be lessened.
    > CSS Shorthand:-
    It is a property of CSS that allows us to state various properties using one. It eases the web designers to make concise CSS code and applies style to markup.

    CSS Sprites :-  with the help of CSS sprite, a single image file can be created that consists of many images in a grid form. Only single image is required to be placed on the webpage, while rest of the images can be shown using a property of Background Positioning.

    CSS layout and positioning control: - In order to completely optimize the HTML document one needs to transform the code from tables to CSS layout. This method will lead to faster loading of sites.

    Faster tables:-  CSS can be used to align your table and add background colors, which add style to your sheets and helps in improving the flexibility and speed of the web page or site.

    Substitution:-  CSS based effects can be substituted by JavaScript techniques like menus or rollovers and tables

    These CSS guidelines or tips will let you create a web page which is compact and yet loaded with all the requisite information. Also these speed up techniques will readily allow your sites to upload faster and hence increase the traffic on your site.

    Posted in CSS, Web Design | Tagged: , , | Leave a Comment »

    CSS3-The Future of Web Design

    Posted by weblinkindia on November 11, 2009

    css3With the emergence of Cascading Style Sheets (CSS), the appearance of web pages has revived manifold as they give are equipped with impressive tech features. Now, the boring Web Pages can be replaced with colors and properly aligned tables and graphics. CSS1 and CSS2, officially recommended By W3C, came up with several innovative CSS layouts that changed the face of web designing. The newest version is CSS3, imbibed with countless features that are time saving and are designed in order to satiate the mounting expectations of the new generation. It is giving new dimensions to web designing and taking it to an advanced lap.

    How is CSS3 more advanced than CSS1 and CSS2?
    CSS3 enables the web designers to work in a print-like environment, which is suppler than other existing versions. It lets the webmasters exercise their creativity. As compared to CSS1 and CS2 which have the capability of supporting distinct features like Font Properties, Tables, Margins, Borders, Absolute & Fixed Positioning, Z-Index etc., CSS3 has several new capabilities in store for you.

    Features of CSS3
    >> Multi-column layout
    >> Layered backgrounds
    >> Opacity
    >> RGBA

    Multi Column Layout : -  CSS3 contains a special component that enable us to place content in columns as usually seen in newspapers and magazines. It also gives option to customize the properties (Gaps, Dividers and Rules) of the columns as per requirements. This eases the users to read and understand the content.

    Layered Backgrounds :-  This feature enables numerous background pictures to be applied to the web page or to a small content area. The specialty of the feature lies in its time saving ability and minimum loading time. Also it enables us in creating round-cornered boxes.

    Opacity :-  The existing web pages are opaque and nothing is visible underneath them. With this feature of CSS3 the opacity level can be reduced, offering heaps of design possibilities. This feature has to be implemented as placing plenty of designs can lead to chaos.

    RGBA :- This highly advanced feature is a color mode property, which helps in addition of alpha-bending and shadow blending to our Style Sheets. It also enables us to reorganize our CSS and make use of buttons easier.

    CSS3 is not yet supported by all web browsers but it is huge leap taken in the field of web designing. People are waiting to use these highly advanced features that will allow them to exercise their creative flair. CSS3 will pave the way for the next high-tech lap of web designing.

    Posted in CSS, Web Design | Tagged: , , | Leave a Comment »