1. CSS validation issues
First of all, according to competition requirements, entries must comply with XHTML standards, and submitted CSS must pass W3C verification. The CSS verification situation is ideal. Only 8 entries among the entries failed CSS2.0 verification. The main verification errors are: "Line: 0 font-family: It is recommended that you specify a type family as the last choice."
W3C recommends that when defining fonts, it should end with a category of fonts rather than a single font. For example, "sans-serif" is used to ensure that web fonts can be displayed under different operating systems.
Although most people define "sans-serif" on the body tag, if sans-serif is omitted when defining the font again in other IDs or classes, it is considered that the verification fails. This mistake is not very serious and can be avoided with a little attention.
2. CSS writing suggestions
Add comments to CSS files. Comments will bring convenience to your future maintenance. It is recommended to add comments to CSS files as much as possible, and don't worry about adding a small number of bytes.
Try to shorten the CSS syntax as much as possible. For example, the color value "#FFFFFF" can be abbreviated as "#FFF"; "padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:2 0px" can be abbreviated as "padding:30px 0 10px" 20px;". There are more saving techniques in defining techniques, and as you become more proficient in CSS applications, you will continue to discover better methods.
3. XHTML validation issues
Because it was a style sheet competition, everyone paid more attention to CSS verification, but they were a little neglected in terms of XHTML compliance, and many low-level errors occurred. The main issues are listed below:
target="_blank", this syntax is correct in HTML4.0, but is not allowed in XHTML1.0. One solution is to write target="new", and another solution is to use js to process all targets;
It is best not to embed the style sheet. It is easier to maintain the style sheet file independently. If <style> is embedded, it must be written as <style type="text/css">, and the type cannot be ignored, otherwise XHTML cannot determine what your style is used for.
<br> must be written as <br />. XHTML requires that all tags must be closed. Unpaired tags must be directly followed by "/".
Reuse the same ID. An ID can only be used once in XHTML. If you need to reference the style multiple times, you should use class.
<meta http-equiv="Content-Type" content="text/html; charset="gb2312" />Obviously there is an extra quotation mark in the content attribute value.
Flash embedding method is wrong. <embed> was originally a private tag of Netscape. Even though it was later supported by IE, it was never recognized by the W3C. There is no <embed> tag in HTML4.0. The W3C advocates the use of the <object> tag. In order to solve the problem of compatibility between different browsers, a workaround is to use both tags. The complete sample code is as follows (the flash background is transparent): <object classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=" http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 "
width="300" height="100"> <param name="quality" value="high"> <param name="wmode" value="transparent">
<param name="SRC" value="test.swf"> <embed src="test.swf" wmode="transparent" quality="high"
pluginspage=" http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash "
type="application/x-shockwave-flash" width="300" height="100"> </embed> </object>
But writing it directly in XHTML is still not possible. Now we can only cheat the verification by writing the above code in the flash.js file and then calling it.
<script type="text/javascript" src="flash.js"></script>
Whether flash meets standards is a controversial issue. More instructions: refer to http://www.blueidea.com/tech/site/2004/1920.asp
Codes like id=header class=title should be written as id="header" class="title". Quoting attribute values is the most basic XHTML syntax rule.
4. Compatibility issues
There are 12 works that are deformed and misaligned when viewed in IE6.0, Mozilla Firefox1.0, and Opera 7.12. (I didn’t test with IE5.0, I was lazy:) IE5.0 is a challenge for all CSS layout designers).
It's centered in IE, but not in Mozilla. Setting the body {TEXT-ALIGN: center;} in IE can already center it, but in Mozilla you must add the following style settings to the layer that needs to be centered: MARGIN-RIGHT: auto;MARGIN-LEFT: auto; exceeds the width. The page looks normal in Mozilla, but in IE it is deformed because it exceeds the width, and the side-by-side layers are moved underneath. This situation is caused by the different interpretations of the box model between IE and Mozilla. There are many solutions, such as the "!important" method.
Generally speaking, most of the entries are qualified overall, and the purpose of this competition has been basically achieved. Web standards and CSS layout have been understood and mastered by more and more designers. As for the poor art of some works, I think this is a process. Senior designers should all remember that when the Table layout first appeared, most web pages were very simple. After a period of digestion, understanding and application of CSS layout, there will be more web pages that take both technology and aesthetics into consideration like the first prize entry.