Browser Compatibility: Css_html/css_WEB-ITnose

This article is somewhat related to the previous essay "Browser Compatibility: Javascript". I will continue to summarize it, aiming to solve browser compatibility and help colleagues who encounter similar problems. , if there are more cases of solving browser compatibility, I hope you can share them and discuss them together.

Recently, there have been more and more calls for browser compatibility for the company's BS products. The specific user situation is actually not a matter of concern to me. In short, the work is all around IE6-IE10 (IE11 is not involved for the time being). Chrome and FireFox are the three major browsers (by the way, Firefox is no longer considered mainstream). In addition, there are still many users of 360 and Sogou browsers. As a platform maintainer, I need to improve both in terms of art and user experience. I have to work with a bunch of mainstream browsers. The problems I currently encounter include the following: scroll bar style; box model The shadow effect; the rounded corner effect of some controls; the animation effect; let’s use a case to illustrate it.

1. Form or Dom scroll bar style rendering effect

　

Most people think that the browser scroll bar looks too rustic, and they have to beautify it according to their needs. one time. The IE browser has several styles that can set the style of the scroll bar, but they are just simple adjustments to the color, and these properties only support the IE browser and are not compatible with webkit-based browsers, so another approach needs to be found for webkit. Finally, there is another solution that uses javascript, css, and images to implement custom scroll bars, which will be discussed next time.

Regarding scroll bars, in addition to style, there are also several points to note in terms of functionality: some places must not have scroll bars using overflow:hidden; some places only require vertical scroll bars or only horizontal scroll bars overflow- x/y:hidden; both require overflow:auto.

1. Scroll bar structure diagram and online preview effect

Figure 1

Online preview and configuration scroll bar style address: http://www.dengjie.com/temp /scroller.swf

　2. Set the properties of the scroll bar style under IE

scrollbar-arrow-color: color; /*三角箭头的颜色*/scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/scrollbar-track-color: color; /*立体滚动条背景颜色*/scrollbar-base-color:color; /*滚动条的基色*/

.ScrollBar {  scrollbar-arrow-color:  #000000;  scrollbar-base-color: #71b2dc;  scrollbar-face-color: #71b2dc;  scrollbar-shadow-color: #71b2dc;  scrollbar-highlight-color: #71b2dc;  scrollbar-3dlight-color: #88b8ed;  scrollbar-darkshadow-color: #88b8ed;  scrollbar-track-color:#bde6ff;}<br />该样式可以引用到任意需要滚动条样式的Box模型中，以下是效果图

Figure 2

3. Setting the scroll bar style properties in Chrome

::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的::-webkit-scrollbar-button 滚动条两端的按钮::-webkit-scrollbar-track  外层轨道::-webkit-scrollbar-track-piece  内层滚动槽::-webkit-scrollbar-thumb 滚动的滑块::-webkit-scrollbar-corner 边角::-webkit-resizer 定义右下角拖动块的样式

/*---webkit 滚动条样式--*/  .ScrollBar::-webkit-scrollbar-thumb{background-color:#71b2dc;  height:50px;outline-offset:-1px; outline:1px solid #88b8ed;  -webkit-border-radius:0px;  }.ScrollBar::-webkit-scrollbar-thumb:hover{background-color:#bde6ff;height:50px; -webkit-border-radius:0px;}.ScrollBar::-webkit-scrollbar{width:17px; height:17px;}  .ScrollBar::-webkit-scrollbar-track-piece{background-color:#bde6ff;border:none;-webkit-border-radius:0;}.ScrollBar::-webkit-scrollbar-button {width:16px;height:16px;background-color:#bde6ff;outline:1px solid #88b8ed;outline-offset:-1px; font-size:0px;}.ScrollBar::-webkit-scrollbar-button:vertical:decrement{border-left:8px dashed  transparent;border-right:8px dashed  transparent;  border-bottom:7px solid #000;height:12px;}.ScrollBar::-webkit-scrollbar-button:vertical:increment{border-left:8px dashed  transparent;border-right:8px dashed  transparent;  border-top:7px solid #000;height:12px;}.ScrollBar::-webkit-scrollbar-button:horizontal:decrement{border-top:8px dashed  transparent;border-bottom:8px dashed  transparent;  border-right:7px solid #000;width:12px;}.ScrollBar::-webkit-scrollbar-button:horizontal:increment{border-top:8px dashed  transparent;border-bottom:8px dashed  transparent;  border-left:7px solid #000;width:12px;}.ScrollBar::-webkit-scrollbar-corner {background-color:#bde6ff;}<br />这里是纯样式，所以没有用图片，其实webkit滚动条样式是可以用图片的，但由于项目自身原因，需要与ie下的效果保持一致，效果图如上图2。

Other preview effects: http://almaer.com/scrollbar/index.html

4. Firefox currently does not have Find the CSS that supports the scroll bar style

2. Shadow and rounded corner effects of the box model

.box{　　/*阴影*/　　box-shadow: 3px 3px 5px #ccc;                 /* IE */　　-moz-box-shadow: 3px 3px 5px #ccc;        /* firefox */　　-webkit-box-shadow: 3px 3px 5px #ccc;    /* webkit */　　/*圆角*/　　<br />　　<br />   border:1px solid #ccc;<br />　　border-radius: 4px;　　-webkit-border-radius: 4px;　　-moz-border-radius: 4px;}           

Four of box-shadow Parameters: x-axis offset, y-axis offset, blur value, shadow color

If you want to have shadow effects in four directions and render them with different colors, the effect is shown in Figure 4, code As follows:

.box {    width:300px;    height:300px;    background-color:#fff;        /* 设置阴影 */    -webkit-box-shadow:1px 1px 3px green, -1px -1px 3px blue;    -moz-box-shadow:1px 1px 3px green, -1px -1px 3px blue;    box-shadow:1px 1px 3px green, -1px -1px 3px blue;}

Figure 3

However, the shadow effect is not supported by browsers before CSS3.0. If you want to be compatible css2.0 needs to be implemented using javascript, see the previous essay for the method; or it can be implemented by setting the background with a png image, which will not be described here.