CSS code abbreviation skills

Related Tags:

  Web site usability is a key indicator of speed, more precisely, the pages can quickly the visitors appear in the browser window.    Affect the speed of a variety of factors, including the speed of the Web server, the visitor's Internet connection, as well as download the browser must file size.    Although you can not control the speed of the server and connectivity, but you can control a Web site page file size. 

  In order to allow a web site to be faster, according to the Web builders will routinely compression and optimization on the website of each image file, which often made in order to reduce the file size of a few percentage points at the expense of image quality.    The css style sheets are pure text files, and image compared to a relatively small, Web builders rarely considered adopting measures to reduce its css style sheet file size.    However, through the use of acronyms and other CSS some simple techniques, you can largely reduce the size of style sheets.    In my own style sheet on an informal special tests, I reduced the file size by about 25-50%. 

  CSS nature of the use of the acronym 
  CSS nature of the acronym (shorthand property) is the nature of some precincts to replace the number of related nature of the collection.    For example, the space character (padding property) is a top space (padding-top), the right gap (padding-right), the gap at the Bottom (padding-bottom) and the left gap (padding-left) initials. 

  Let nature of the use of sketches you can put a number of nature / attribute the (property / attribute pair) compressed into CSS style sheet, line code.    For example, consider 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; 
  ) 
  It will be used to replace some initials on the nature of the code can be reduced to below this way, the practical effect of the two is exactly the same: 
  . Sample1 ( 
  Margin: 15px 20px 12px 24px; 
  Padding: 5px 10px 4px 8px; 
  Border-top: thin solid # 000000; 
  ) 
  Bearing in mind that there are a number of attributes abbreviated nature, every (attributes) corresponds to enter an abbreviation combination of conventional nature.    Properties separated by gaps. 

  When the attribute is similar to the value of the time, for example, borders blank character (margin property) linear measurement, then the initials nature of the attributes of the order is very important.    Attributes in the order from the top (the top of the frame blank), then on the lattice (box) clockwise according to the order. 

  If all the attributes of the nature of initials is the same, then you can simply set out a single attribute, and then reproduce it in the front four times.    Therefore, the following two properties are equivalent: 
  Margin: 5px 5px 5px 5px; 

  Margin: 5px; 
  Similarly, you can use the access gaps in the frame or two after the interval nature attribute to represent the top / bottom and right / left attribute right. 
  Margin: 5px 10px 5px 10px; 

  Margin: 5px 10px; 
  Attributes in the order they are not similar to the value of the time is unimportant.    Therefore, Border color, frame style and attributes such as frame Width can be in any order to outline the nature of the (outline property) after.    Overlooked a pattern from the same attributes, ignored the Rules of the corresponding conventional nature. 

  Below is a list of CSS stands for nature and their expressed by the conventional nature. 
  Background (background): Background annex, background color, background image, background location, background repeat 
  Border (Borders): border color, frame style, frame width 
  Border-bottom (bottom frame): at the Bottom Border color, the bottom frame style, frame width at the bottom 
  Border-left (left border): The left frame color, the left frame format, and the left frame width 
  Border-right (the right frame): The right frame color, the right frame format, and the right frame width 
  Border-top (top frame): Top Border color, the top frame format, the top rim width 
  Cue (voice prompt): Former tips, after tips 
  Font (font): font, size, Font Style and font size, font variations, line height, adjust the font size, font tensile 
  List-style (list style): List of style images, the List Style location, type styles List 
  Margin (blank): Top blank, right blank blank at the bottom left blank 
  Outline (Commitments): outline color, style outline, the outline width 
  Padding (gap): Top space, the right space, space at the bottom of the left gap 
  Pause (suspended): After the suspension, the former suspended reduce blank CSS style sheets to reduce the size of another kind of file is deleted from the most useless blank.    In other words, each will be breaking the rules of the code into line, that is inserted into the original code used to, the nature of each / attribute divided into different line breaks and indentation to address deleted. 

  For example, the following code in the content of the same examples, but the second to much more refined: 
  h1
  Font-size: x-large; 
  Font-weight: bold; 
  Color: # FF0000; 
  ) 

  H1 (font-size: x-large; font-weight: bold; color: # FF0000) 
  Deleted Notes 

  Notes will be from your CSS code, delete the file size is reduced another way.    Although the Notes code reading useful, but it does not help to generate your browser Web pages.    Many Web builders are used every line of code to add Notes, or at least every one to the statements with the rules.    Notes such generous in CSS style exterior is rarely necessary because the majority of CSS nature and attributes are easy to read and understand.    If you like, ID, as well as other options for use meaningful names, you can save most of the notes, while still maintaining code readability and maintainability. 
  H1 (/ * Heading 1 style * / 
  Font-size: x-large; / * x-large size * / 
  Font-weight: bold; / * Bold * / 
  Color: # FF0000; / * Red * / 
  ) 
  Sketch nature of the use to delete unwanted blank, omitting Notes can to a large extent reduce your css style sheet file size.    This, in turn, will accelerate the speed of your Web site to the overall goal of small, but may be obvious contribution. 

Related articles:

Well-designed project structure FLASH 1 - Single-mode cases
  Single cases mode (Singleton) to ensure that only a certain type of a case, but also to their own examples of this system as a whole to provide examples of single-mode.    Single-mode should only be in the case of a genuine "single case" needs to use FLASH Why should the ...
Intermediate HTML tags Guide span and div
  In view HTML primary purpose of the handbook is the skeleton of HTML elements, the increased number of osteosarcoma Intermediate Guide, they should not be special difficulties, but we can further enhance the understanding of HTML, so that we can do something more useful things.    ...
Div + css named reference
  Naming reference    CSS common naming rules:    Head: header    : Content / container    Mei: footer    Navigation: nav    Sidebar: sidebar    Columns: column    External control overall page layout width:...
Dreamweaver image rendering techniques
  Dreamweaver3.0 you can use to easily image of a shadow, fuzzy, sports, Halo, wave, cuts out, and many other effects, you can no need to reach a certain image using Photoshop effects of this monster.    Below we find out specific images to the production of special effects methods.&n...
Discuz! "Free" software services are fans of the trend
  Discuz! "Free" software services are fans of the trend    January 1, 2006, the nation's largest software community a service provider to a Hong Sing (Comsenz) the company's flagship software product Discuz! Free of charge, thus changing the product has been charg...