CSS兼容攻略

xialong 发布于2019-08-30 15:52 / 713人阅读

摘要：平常要多留心，摸不准兼容如何就该多看看，额，还有就是自己要明白页面该兼容到什么程度是否需要兼容一上来得把这个问题想好，有些效果不兼容就不兼容呗，只要后退平稳即可，如这种情况下的图片来自，这种情况下，对于不支持属性的浏览器，还是不用强行支持的

blog
md

平常要多留心，摸不准兼容如何就该多看看can i use，额，还有就是自己要明白页面该兼容到什么程度

1 是否需要兼容

一上来得把这个问题想好，有些效果不兼容就不兼容呗，只要后退平稳即可，

如这种情况下的CSS Shapes：

图片来自w3cplus，这种情况下，对于不支持CSS Shapes属性的浏览器，还是不用强行支持的好。

2 是否只需后退处理即可

跟第一点比就是加上额外的后退处理（本来就该有的），如CSS渐变的后退处理：

    background-color: #f9efee;
    background-image: linear-gradient(to left, #f5e5e3 0%, #ffffff 52%, #f5e5e3 100%);

3 需要额外区别的情况

用css处理的话就是各种HACK了：

CSS hack技巧大全

巧用浏览器CSS属性值的不兼容向下兼容hack技巧

用JS处理的话，最好的方法自然是能力判断了，可以使用modernizr.js或如下代码：

if ( !("shape-margin" in document.documentElement.style)) {}
//如果不支持shape-margin属性则如何如何

4 强行效果一样

到了这一步，那只能拿出这种代码了

text-shadow: 2px 2px 15px #333;
filter: glow(color=#333333, strength=2);
/*老IE不支持文字阴影，对其使用IE滤镜*/

又多又杂，还是看这吧

私有云专线服务 css兼容服务器css兼容性 beta2的CSS兼容性兼容模式不兼容js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116403.html

FE.WX-小程序“无聊广场”游戏前端性能优化与踩坑攻略

摘要：本文主要针对小程序无聊广场的前端开发内容做总结，记录常见的一些老生常谈的进阶手法，对小程序中的动画音频等踩坑做出解决方案。背景一个交互不复杂，对刷新频率和动画效果要求不高的小游戏，不需要使用canvas主导的解决方案，使用dom操作一样可以完成。节省了cocos creater的学习成本，值得一试。本文主要针对小程序无聊广场的前端开发内容做总结，记录常见的一些老生常谈的进阶手法，对...

qpal 2019-08-22 18:26 评论0 收藏0
少女风vue组件库制作全攻略~~

摘要：组件监听自定义事件。组件触发自定义事件。生命周期钩子函数，后组件的所有的事件监听器会被移除。技术点总结组件设计的思想包括单数据流事件中心，核心是组件通信。完善给弹出日期面板和关闭日期面板增加组件自定义事件即调用触发和事件。预览组件库官网 github地址如果喜欢各位小哥哥小姐姐给个小星星鼓励一下哈，请勿在生产环境中使用，供学习&交流~~ showImg(https://user...

springDevBird 2019-05-21 19:19 评论0 收藏0
[译] 前端攻略-从路人甲到英雄无敌二：JavaScript 与不断演化的框架

摘要：一般来说，声明式编程关注于发生了啥，而命令式则同时关注与咋发生的。声明式编程可以较好地解决这个问题，刚才提到的比较麻烦的元素选择这个动作可以交托给框架或者库区处理，这样就能让开发者专注于发生了啥，这里推荐一波与。本文翻译自FreeCodeCamp的from-zero-to-front-end-hero-part。继续译者的废话，这篇文章是前端攻略-从路人甲到英雄无敌的下半部分，在...

roadtogeek 2019-08-19 18:25 评论0 收藏0
网页元素CSS居中实现完整攻略

摘要：水平居中行内元素解决方案只需要把行内元素包裹在一个属性为的父层元素中，并且把父层元素添加如下属性即可水平居中块状元素解决方案这里可以设置顶端外边距水平居中多个块状元素解决方案将元素的属性设置为，并且把父元素的属性设置为即可水平居中多水平居中：行内元素解决方案只需要把行内元素包裹在一个属性display为block的父层元素中，并且把父层元素添加如下属性即可： .parent { ...

mikasa 2019-08-28 18:19 评论0 收藏0
分享一些遇到的好文章

摘要：移动端布局总结移动端全兼容的移动端知识涵盖伪类等全移动端不得不讲的头标签移动端自适应方案移动端适配总结布局新旧混合写法详解兼容微信使用实现手淘页面的终端适配淘宝弹性布局方案实践理解所需的知识产生的小数像素问题高性能动画动画的性能优化处理和动移动端rem布局总结移动端全兼容的flexbox 移动端知识(涵盖、css、伪类等)【全】移动端不得不讲的头标签移动端自适应方案移动端适...

Tikitoo 2019-08-20 14:49 评论0 收藏0