前端CSS兼容的一些思路
2024-08-22 18:33:43
半夜睡不着觉,起来写第一博。
近段时间,公司要给一个网站产品增加一个换色功能,安排我负责该事项。
之前参与过一些定制项目,是基于该产品的二次开发,说实话里面的前端结构很混乱。所以第一步就是将html前端标签进行了重构,规范了标签结构和className。第二步就开始按照产品原有的样式增加CSS代码。
在这时碰到了一个圆角边框的问题,以前的代码是在每个页面写一个固定结构的div,使用背景图片来实现圆角边框。代码结构大致如下:
.top_border{background:url(topborder.png);}
.left_border{background:url(leftborder.png);}
.right_border{background:url(rightborder.png);}
.bottom_border{background:url(bottomborder.png);}
<div>
<div class="top_border"></div>
<div class="left_border"></div> <div class="content">
...
</div> <div class="right_border"></div>
<div class="bottom_border"></div>
<div>
在重构时,我直接把这个结构修改为最简化的版本
<div class="content"></div>
这里就有点问题:使用boder-radius可以实现圆角边框,但是不支持IE7 、IE8。
当时我认为,我的这个规范是正确的,所以希望通过不修改HTML的代码结构来完成对IE7/IE8的兼容。
搜索了一下IE7/IE8的解决方案:http://www.cnblogs.com/binyong/archive/2009/11/30/1613376.html
就以此为基础,使用js来对IE7/IE8进行兼容。主要代码逻辑如下:
if( typeof (document.documentElement.style["border-radius"]) == "string")//判断是否支持
{
$.fn.extend({//实现圆角
borderRadius : function (r)
{
var b = this.wrap("<div></div>").parent();
//以下代码 主要以逻辑为主 并非真实执行代码 ,为四角 border-radius = 5的实现 //调整margin 及 宽度 以符合旧div的布局
b.css( {margin : this.css("margin") , "width ": this.clientWidth});
this.css({margin:"0"});
var borderColor = this.css("border-color");
var background = this.css("background-color");
var borderStyle = this.css("borer-style"); //重设边框,只保留两侧边框
this.css({"border-top-width":"0","border-bottom-width":"0"});//
//创建HTML结构,实现上下边框
var setting = { m: [1,2,3,5],bw : [1,1,2,0] };
var i = 0;
for(; i < 3; i++)
{
var t = $("<b><b>").css({"height": 1 , "margin" : "0 " + setting.m[i] + "px",
"border-left-width" : setting.bw[i] +"px","border-right-width" : setting.bw[i] +"px",
"border-color":borderColor,"background-color":background});
b.append(t);
b.prepend(t.clone(true));
}
var t = $("<b><b>").css({"height": 1 , "margin" : "0 " + setting.m[i] + "px",
"border-width" : "0",
background-color":borderColor});
b.append(t);
b.prepend(t.clone(true));
}
});
$(".content").borderRadius(5);//设置圆角
$(".border1").borderRadius(5);
}
虽然运行时的HTML结构变化了,但是编码时的HTML结构没有变化,也算是一种兼容方式吧。
还记得以前也有JS处理过一些其他伪类的兼容,一起列出来:
场景:鼠标移入显示二级菜单。
通常的做法:
.menu{}
.menu li ul{display:none;}
.menu li:hover ul{display:block;}
<ul class="menu">
<li><a>一级</a>
<ul >
<li><a>二级</a></li>
<li><a>二级</a></li>
</ul>
</li>
</ul>
当IE6不支持时,可以进行调整
.menu{}
.menu li ul{display:none;}
.menu li:hover ul,.menu li_hover ul{display:block;}/*增加了一个样式名*/
增加兼容JS
if(不支持:hover)
{
$(".menu li").hover(function(){$(this).addClass("li_hover");},function(){$(this).removeClass("li_hover");})
}
增加下面的JS,还可以兼容触屏
if(触屏)
{
$(".menu li").click(function(){
var isHover = $(this).hasClass("li_hover");
if(!isHover)
{
$(this).addClass("li_hover");
}
else
{
$(this).removeClass("li_hover");
}
});
}
以上这些方式仅是个人喜好而已。欢迎各位发表见解。
最新文章
- Javascript的函数自调
- 学生成绩管理系统[C]
- ASP.NET MVC- 布署
- CF 545E Paths and Trees
- PHP获取毫秒时间戳
- 分辨率验证工具 - 【Firesizer】的使用
- 201521123035《Java程序设计》第五周学习总结
- Django中Q查询及Q()对象
- 快捷键打开Generate
- ceph hammer 0.94.10手动部署方法Ceph Hammer版(0.94.10)手动部署for CentOS 7.x
- 吴裕雄 python matplotlib 绘图示例
- 【精】搭建redis cluster集群,JedisCluster带密码访问【解决当中各种坑】!
- python中的Process
- leetcode笔记:Bulls and Cows
- Android保持屏幕常亮
- Spring Boot 集成 MyBatis和 SQL Server实践
- 什么是Apache ZooKeeper?
- CPA定律——一致性,可用性和分区容错性
- logger示例
- Ubuntu 16.04 源码编译安装PHP7+swoole