css| Skills
A key indicator of Web site usability is speed, or rather, how quickly a page can appear in a visitor's browser window. There are a number of factors affecting speed, including the speed of the Web server, the Internet connection of visitors, and the size of the file that the browser must download. Although you can't control the speed of your servers and connections, you can control the size of the files that make up your Web pages.
To make the site faster, the builders of the web routinely compress and optimize every image file on the site, often sacrificing the quality of the image in order to reduce the size of the file by a few percent. Because CSS stylesheets are plain text files and are relatively small compared to images, web builders rarely consider taking steps to reduce the size of their CSS style sheet files. However, by using CSS abbreviations and other simple techniques, you can significantly reduce the size of your style sheet. In an informal special test of my style sheet, I lowered the file size by about 25-50%.
Using the abbreviated nature of CSS
The abbreviated nature of CSS (shorthand property) is a proprietary name used to replace multiple sets of related properties. For example, the clearance property is the abbreviation for the top clearance (padding-top), the right clearance (padding-right), the bottom clearance (padding-bottom), and the Left clearance (padding-left). padding
Using the Sketch property allows you to compress multiple properties/attribute pairs (Property/attribute pair) into a single line of CSS style sheet code. For example, think about the following code:
. sample1 {
margin-top:15px;
margin-right:20px;
margin-bottom:12px;
margin-left:24px;
padding-top:5px;
padding-right:10px;
padding-bottom:4px;
padding-left:8px;
Border-top-width:thin;
Border-top-style:solid;
Border-top-color: #000000;
}
to replace it with some abbreviated features to reduce the code to the following, the actual effect is exactly the same:
. sample1 {
margin:15px 20px 12px 24px;
padding:5px 10px 4px 8px;
Border-top:thin solid #000000;
}
Note that there are several attributes of the abbreviation, each of which corresponds to a conventional property that is grouped into abbreviated properties. Properties are separated by whitespace.
the order of the attributes after the abbreviation is important when the attribute is a similar value, for example, for linear measurements of the border whitespace property (margin properties). The order of the properties begins at the top (the top border is blank), and then continues in the clockwise order around the lattice (box).
If all attributes of the abbreviation are the same, you can simply list a single property and then copy it four times before. Therefore, the following two properties are equal:
margin:5px 5px 5px 5px;
margin:5px;
Similarly, you can use the two attributes that are followed by a border blank or Interval property to represent the top/bottom and right/left property pairs.
margin:5px 10px 5px 10px;
margin:5px 10px;
The order of the
attributes is unimportant when they are not of the same value. As a result, attributes such as border color, border style, and border width can be connected in any order after the outline nature (outline property). Ignoring an attribute is equivalent to ignoring the corresponding general nature from the style rule.
The following is a list of CSS abbreviations and the general nature of what they represent.
Background (background): Background attachment, background color, background image, background position, background repeat
Border (Border): border color, border style, border width
Border-bottom (bottom border): Bottom border color, bottom border style, bottom border width
Border-left (left border): Left border color, left border style, left border width
Border-right (right border): Right border color, right border style, right border width
border-top (top border): Top border color, top border style, top border width
Cue (sound hint): Before prompting, after prompting
fonts: Font, font size, font style, font weight, font variant, line height, font sizing, font stretching
List-style (List style): List style image, List style position, List style type
margin (blank): Top blank, right blank, bottom blank, left blank
Outline (outline): outline color, outline style, outline width
padding (GAP): top clearance, right clearance, bottom clearance, left Gap
Pause (pause): Pause after, pause before
reduce blank
Another way to reduce the size of a CSS stylesheet is to delete most of the unused whitespace from the document. In other words, break each rule into one line of code, and delete the newline and indent characters that were inserted into the code to separate each property/attribute into a different line.
For example, the following code example is the same on the content, but the second one is much more refined:
H1 {
Font-size:x-large;
Font-weight:bold;
color: #FF0000;
}
H1 {Font-size:x-large font-weight:bold; color: #FF0000}
Delete Comment
deleting annotations from your CSS code is another way to reduce file size. Although annotations are useful for reading code, they do not help browsers generate your Web pages. Many web builders are accustomed to annotating every line of code, or at least adding to each rule declaration. Such generous annotations are rarely needed in CSS stylesheets because most CSS properties and attributes are easy to read and understand. If you use meaningful names for classes, IDs, and other selectors, you can dispense with most annotations while still keeping your code readable and maintainable.
H1 {/* Heading 1 style*/
Font-size:x-large; /* X-large size */
Font-weight:bold; * * Bold/
color: #FF0000; * * Red/
}
Using sketches, removing unwanted whitespace, and omitting annotations can greatly reduce the size of your CSS style sheet files. This, in turn, makes small, but probably obvious, contributions to the overall goal of accelerating your Web site's speed.
