Web design: Use CSS abbreviations to speed up your website

css| Design | Web Page Design | website acceleration

About CSS

Use CSS abbreviations to speed up your website

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%.

Use CSS abbreviations to speed up your website

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; }

Replacing it with some abbreviated properties can reduce the code to the following, and 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 to the abbreviation, and each (attribute) corresponds to a conventional property that is grouped into the abbreviated nature. Properties are separated by whitespace.

When a property is a similar value, such as for a linear measurement of the border whitespace property (the margin property), the order of the attributes after the abbreviated nature is important. 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 connected to the top/bottom and right/left sides of the border, either at the end or the space.

margin:5px 10px 5px 10px;

margin:5px 10px;

The order of attributes is not important 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): Prompt before, prompt after

Font font: Font, font size, font style, font weight, font variant, line height, font size adjustment, 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 clearance

Pause (pause): Pause after, pause before

Reduce whitespace

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.

Why should I use CSS?

Since the launch of Dreamweaver MX 2004, I have demonstrated its new features and new features to Dreamweaver's new and old users countless times. Every time I do a product demo, I will quickly applaud Dreamweaver MX 2004 for the new features of designing and rendering CSS (or cascading style sheets).

However, recently a new user asked a question, to tell the truth, this question suddenly let me tongue-tied. The user simply asked, "Why should I use CSS?" I realized at the time that while the people we worked with in HTML and CSS every day were very knowledgeable about the virtues of CSS, there were still a lot of people who didn't understand it. Or you don't fully understand all the benefits that CSS can offer. This is my written answer to the new user above.

CSS origin

Before reviewing the advantages of CSS, I would like to introduce its history first. The WEB Management Organization Consortium recommended the use of CSS in November 1996 and approved the CSS Level 1 specification. The CSS Level 1 specification describes the properties used for HTML pages. These properties replace traditional font labels and other "style" tags, such as color and margins. May 1998, the consortium approved the CSS Level 2 specification, added some additional functionality to the Level 1 specification, and introduced positioning attributes. These properties replace the common (but incorrect) use of table tags to design the representation of page elements. The latest version of the CSS specification is CSS 2.1, which improves some properties and removes properties that do not function or function very little in the current browser.

Unfortunately, like many new technologies, CSS has gone through a long process before it is widely accepted. The main reason for this is the browsers and the Web designers who built the sites for those browsers. During the CSS approval period, Netscape Navigator (NN) is still the dominant browser, and the browser basically does not support CSS. Microsoft has added very limited support for CSS in its version 3rd browser, but most Web designers (myself included) still use NN as the preferred platform for page encoding.

For many years, browser makers have expanded their support for CSS for every new release. Today, Internet Explorer 6, Netscape Navigator 7, Mozilla, Opera, and Safari all fully support CSS. But that doesn't mean our careers as WEB designers and developers don't have problems. Although all of these browsers support CSS level 2, their compatibility is still different. And in some cases, specific attributes can still cause you a lot of trouble. That is, you still need to adhere to the old creed, "Test and test." But if you insist on using the core attributes of the CSS specification, you will be able to render the page correctly.

But why does the consortium think it is necessary to create CSS specifications? What does all this mean to me when I create html-based Web sites and applications? I think the reasons we need to use CSS and the advantages it brings can be grouped into the following three main areas: flexibility, presentation, and accessibility

Flexibility

I'm sure almost every Web designer and developer has experienced this painful moment: when you carefully decorate the page and complete all nested tables, the customer asks for a little "little" change. The small change might just be "can you move that graphic a little bit to the left?" or it could be dramatic: "I don't like these titles, can you make them bigger?" When you change the font, you change the color. If you only need to deal with a limited number of pages, you can take a deep breath and spend half an hour making those annoying changes. But if the larger site is involved (which is already common), a simple change is not easy anyway.

Why is such a situation so painful? Because the markup that defines the appearance of the page is itself part of the page. To see an instance, you only need to count the number of font and table labels on any page in any site. As long as you can remove these tags from the actual page's process (or code), or take a better approach, you can make a centralized change. And that's what CSS can do.

If you use one or more external style sheets, you can apply the changes to the site by modifying the style sheet and then uploading the modified version.

Imagine how difficult it would be to move site browsing from the left side of the page to the right side of the page in a traditional tabular layout. It takes a few hours to repeat and tedious work. However, if you choose to design a page by using the positioning properties of CSS (often called css-p), you can update the page by simply changing the float or position property in the external style sheet. You also have the following additional advantages: You have updated all pages in your site that use that style.

Rendering of

Because of the wide use of broadband, many developers are no longer considering the time it takes to render a page in a browser. However, you should keep in mind that many target users are still using dial-up connections. The traditional table based layout is the main reason for the slow download speed of the page. Because browsers receive pages from the server, they must first examine and "understand" a series of complex mosaic tables. It must first find the embedded contents and carefully step through the code until it reaches the outermost container, the body tag. After you complete all of the procedures above, the browser can begin rendering content on the screen.

If you use CSS, the browser receives content from the server and immediately begins the rendering process because there are no or few display tags on the page.

There is also a potential rendering benefit of using an external style sheet. In a traditional tabular approach, browsers must retrieve, parse, and render each page individually. That is, the browser consumes as much work as page 30th on your site as it does on page 1th.

However, if you use an external style sheet for display, the first page of the site prompts the browser to cache the linked style sheet files used by the page. This means that all subsequent pages in the site that use the style sheet are downloaded faster because the browser has cached the style sheet.

One of the last advantages associated with presentation reminds me of the movie Mozart. In the movie, Mozart asked the King what he thought of his opera. The king said it was fine, but it was dull. Mozart repeated his inquiries, and the king explained that the problem was "too many notes". Web design may also have the same problem, of course the notes here refer to the actual HTML code. The more code you have, the longer it takes the browser to understand the page.

You've probably heard rumors about official apps that write very bad code that is full of complicated information, but the document page doesn't appear. As a Dreamweaver user, you won't get the problem, but if you write too much code, you'll feel guilty too. A typical table based design is a good example.

After you have used CSS in your design, you will reduce the number of code that customers need to download. Simply reducing the font labels on some pages can significantly reduce the number of code. In many cases, the number of code can be reduced by up to 50% or more if you design it completely using css-p. A reduction in code means that the page downloads faster.

Accessibility

Now I often hear people talk about accessibility. Most developers know they have to think about building more accessible sites, but to a greater extent, only developers who build sites for government or educational institutions are forced to do this. Most developers think this simply means adding the ALT attribute to the graphic, taking into account accessibility issues. But in fact, there's a lot of work to do to improve accessibility, and CSS makes it easy to build accessible sites.

The main problem with accessibility (and the problems that can be solved with CSS) is how assistive technologies, such as screen readers, "read" the page. In a traditional tabular environment, screen readers face a huge challenge, which is deciding how to read the page. Think about how confusing it should be when a screen reader encounters a deeply embedded table, should it read the content, or skip the content? After skipping the content, how do you want to return the content later?

When you click on the page, you will soon see what is interesting in the page and ignore the navigation and other content at the top of the page. People with poor eyesight can't do that. He had to wait for the screen reader to parse through all the complex information between the top of the page and the content he was interested in.

Of course, there are techniques that enable screen readers to skip navigation, but this requires adding links to images in navigation bars or other content. The running of these technologies can cause confusion, and other people who visit the site can see them. With CSS, you can fully define the elements that are not seen in the page (for other site visitors and your mouse). Screen readers can use these elements to navigate quickly and efficiently process documents.

Because CSS does not display markup, the only problem the screen reader encounters is the actual content. In addition, when you design with CSS-P, you will focus on the actual "flow" of the content. You start to think about its logical order on the page.

When you read this document, you understand the information flow. However, in the example of a mosaic table, if you use a multiple-column layout, this paragraph is likely to be in the upper-right corner of the page. That way, a screen reader cannot know that it should read this paragraph at the end of the article.

After using Css-p, the browser may still display this paragraph in the upper-right corner of the browser window, but when you view the source code for the document, the paragraph is still in the HTML of the document where you see it. This makes the page easier to access.

Summary and Planning

The above is my answer. I wish I had explained the unique advantages of using CSS for WEB design. Obviously, there are a lot of things to learn. Therefore, I encourage you to read other articles in the Macromedia Developer Center about CSS that will help you better understand the benefits of CSS and teach you the entire process of using CSS in your design. For the next few weeks and months, I'll be back with more CSS tutorials. Just write here and hope you will be happy to use our style.

　　About the author

Greg Rewis is the most important advocate of Macromedia Web technology. Greg is Macromedia's public advocate for the Macromedia Software suite and Web application development server released on the web, and he communicates with the product Development Department on behalf of the company's thousands of customers. Greg knew the Macromedia client's idea very well because he was "on the road" every year for 200 days, and he talked to customers, showed products at exhibitions, seminars and conferences, and organized advanced training sessions to introduce Macromedia production lines. Greg always flew around the world, but after work he enjoyed life in the Arizona desert, playing golf and teaching his two sons "to relax in the pool" art.

Original: Mezzoblue CSS crib Sheet

CSS Brocade Bag

When using CSS to build a station, you must have encountered a variety of layout problems, and may end up in a mess. The purpose of this article is to make your design process easier and provide you with a quick reference when you encounter difficulties.

In doubt, verify first

Validating your code before debugging can often save a lot of hassle. Incorrectly formatted XHTML/CSS can cause many layout errors.

Before you test in another browser, write and test the CSS code in the most advanced browsers, rather than the other way around.

If you write and test in a bad browser, your code will have to rely on the poor display of that old browser, and then test in a compliant browser, and you'll be frustrated when you see that the results are "not normal". Instead, you should refine your code before you try to plan for a lower-level browser. That way your code is standard from the start, and you don't have to bother with supporting other browsers. Of course, the current standards-compliant browsers are no doubt Mozilla, Safari or Opera.

Make sure that the effect you want really exists

Many specific browser-proprietary CSS extensions do not exist in the formal standard. If you specify a style for the filter (filter) or scroll bar, you are using private code that has no effect in other browsers except IE. If the validator tells you that the code is not defined, it is most likely that you have used a private style and don't expect to get consistent results in different browsers.

If you want to use floating objects in your layout, don't forget to use the clear attribute at the right time.

Floating elements seem easy and difficult to manage. If you find that a floating object extends the bounds of the container or does not display as you expect, check to see if your expectations are correct. See Eric Meyer's tutorial on this question.

Consolidation of margins: can be avoided by padding or border.

You may be overwhelmed by the extra (or unwanted) whitespace. If you use margins, the consolidation of the margins may be the cause of the problem. Andy Budd may be able to explain this to you.

Avoid applying padding/border and fixed widths to the same element at the same time.

The IE5 error block model is the culprit, and it makes a mess of things. Although there is a remedy, it is best to circumvent this problem by specifying padding for its parent element when the child element's width is fixed.

Avoid blinking of the style content not specified under IE.

If you use @import to enter the external style sheet, sooner or later you will find IE has a "flashing" problem. Unformatted HTML text appears briefly before CSS styles are applied. This can be avoided.

Don't expect min-width to be useful in IE.

IE does not support it, but it treats the width as min-width, so the same end result can be achieved by some IE filtering techniques (filtering).

When cornered, try to reduce the width

Because of rounding errors, sometimes 50% plus 50% equals 100.1%, destroying the layout in some browsers. Try to reduce the 50% to 49%, or even 49.9%.

is the display not normal in IE?

It may be that the Peekaboo bugs are at work, especially when the mouse is over the hyperlink to show normal. Fix method See position is Everything.

If you use anchor points, be especially careful when you apply a hyperlink style.

If you use traditional anchor points () in your code, you'll notice that hover and: active pseudo classes also work on it. To avoid this situation, you can use the ID, or use the lesser-known syntax:: Link:hover,: link:active

Remember "love/hate" (Love/Hate) Link rules

To specify the hyperlink pseudo class in the following order: link, visited, Hover, acitve. Any other order is not appropriate. If used: Focus, the order should be LVHFA ("The Lord Vader ' s Handle formerly Anakin", Matt Haughey suggested).

Keep in mind the "troubled" (troublesome) border.

The short order of the Border (border), margin (margin), and filler (padding) is: Clockwise from top, right, Bottom, left. For example, the margin:0 1px 3px 5px indicates that the top margin is zero, the right margin is 1px, and so on.

Non-0 value to specify the unit.

When you specify a font, margin, or size in CSS, you must indicate the unit used (the only exception is Line-height, which, oddly, does not require a unit). Some browsers Buwei the processing method for unspecified units. Zero is 0, whether it's px or em. All other non-0 values must be explicitly specified. For example: padding:0 2px 0 1em;

Test for different font sizes.

Advanced browsers like Mozilla and Opera allow you to change the font size, no matter what font unit you use. The default font sizes for some users are certainly different from yours and do their best to satisfy them.

Use inline style when testing, and change to external input when publishing.

Embed style sheets in your HTML source code, and you can eliminate a lot of cache errors when testing, especially in some Mac browsers. But before publishing, be sure to remember to move the style sheet to an external file, @import or introduce it.

Add a clear border to help with layout debugging.

Global rules like div {border:solid 1px #f00;} can temporarily detect layout problems for you. Adding a border to a specific element can help you find an overlapping or blank problem that you can't detect.

Do not use single quotes for picture paths.

When setting a background picture, stick with double quotes. Although it seems superfluous, Ie5/mac will choke if he does not.

Do not "Occupy" a future style sheet (such as a handheld device or a print style sheet).

The Mac IE5 the empty style sheet, which can increase the loading time of the page. There should be at least one rule in the suggested stylesheet (even in comments), lest Macie choke.