CSS Development Summary

I have been doing a lot of web development recently. I would like to summarize the CSS skills I have encountered:

 

1. compatibility issues with layer transparency

Most people are used to using the unique filter of IE to create a translucent Div layer. What should I do when I encounter other browsers? Each browser has its own transparent syntax. It is better to use the following method to make them compatible:

 

. Layer {<br/> position: absolute; <br/> width: 100px; <br/> Height: 100px; <br/> top: 0; <br/> left: 0; <br/> Z-index: 10; <br/> filter: alpha (opacity = 60);/* supports ie */<br/>-moz-opacity: 0.6;/* supports Firefox */<br/> opacity: 0.6;/* supports other browsers */<br/>}

 

2. Font Center

After defining a SPAN or label, the font is displayed at the top boundary by default. to center the font horizontally, use text-align: Center. However, to center the font vertically, you can only use line-height to set a value similar to the Span Height to center.

 

3. Width of span and label

Sometimes a SPAN or label is defined and the width: 200px is set in the style. However, they actually adapt the width according to the content in the style, in this case, you must add row-level settings to the style to specify its width (that is, add display: inline-block ;)

 

4. Image anti-leeching

For images placed in the IMG label, you can right-click and save them as images and copy them. If you do not want them to be stolen, you can set the images to the background-image attribute of a certain span, however, it also sacrifices some browsers to provide flexible and unique support for IMG labels.

 

5. HTML editor

I made an HTML editor by myself. There are three methods in which I prefer to use IFRAME and set its designMode = 'on'; To achieve editable effect. In fact, I replaced the selected style, many examples Use pastehtml replacement. I tried the Execcommand function provided by the document object itself to achieve the same effect using simple code (for example)

 

<IFRAME class = "htmleditor" id = "htmleditor" marginwidth = "0" marginheight = "0"> </iframe> </P> <p> <button onclick = "Format ('bold ', '')"> bold </button> </P> <p> <MCE: Script Type = "text/JavaScript"> <! -- <Br/> Function Format (what, OPT) {<br/> If (OPT = NULL) htmleditor.document.exe ccommand (what); <br/> else htmleditor.document.exe ccommand (what, "", OPT); </P> <p> htmleditor. focus (); <br/>}< br/> // --> </MCE: SCRIPT>