css工程化和浏览器兼容性问题 -尊龙游戏旗舰厅官网

css工程化

css编译器
　css编译器，也叫做css预编译器，是指开发者使用某种类似css（但实际不是）的语言编写代 码，然后通过编译器，将其编译成浏览器真正能执行的css代码。
　　目前常见的css编译器有：sass和less。本文已常用的sass为例，来讲解如何用sass来实现 优雅简洁的css代码。
sass示例

$darkcolor : #2e2e2e; //定义一个颜色变量，值为#2e2e2e $lightcolor : #c1c1c1; //定义一个颜色变量，值为#c1c1c1 .site-footer { background: $darkcolor; //使用变量$darkcolor的值作为背景色 color: $lightcolor; //使用变量$lightcolor的值作为前景色 padding: 50px 0; } .site-header { background: $darkcolor; //使用变量$darkcolor的值作为背景色 color: $lightcolor; //使用变量$lightcolor的值作为前景色 position: fixed; left: 0; top: 0; }

sass的安装
　　koala是一个预编译工具集，它内置了sass、less等多种前端的预编译器，并且提供图形化的操 作界面，无论对于新手和老手，都是非常不错的选择。
　　　　1、新建一个文件夹，并用你熟悉的文本编辑器打开（例如vscode），然后在文件夹中新建css文件 夹，用于存放sass文件以及css文件，再在根目录中新建一个index.html文件。
　　　　2、在css文件中新建一个 index.scss 文件，注意后缀名为 .scss ，表示这是一个使用sass css语言 编写的文件。
　　　　3、打开安装好的koala，将你的工程文件夹拖动koala的主界面中。vscode中，已经生成了对应的css文件和一个map文件.

　　编译选项
　　　　1. autoprefix自动前缀
　　　　　　选中该选项，在编译时，会自动对浏览器有兼容问题的属性加上厂商前缀。
　　　　2. compressed压缩模式
　　　　　　选中该选项，在编译时，会对生成的代码进行压缩，以达到小文件体积。

变量

sass使用 $ 符号来标识变量。

1、变量声明
　　　　sass变量的声明和css属性的声明很像： $highlight-color: #f90; 这意味着变量$highlight color 现在的值是#f90。任何可以用作css属性值的赋值都可以用作sass的变量值，甚至是以空格分割的 多个　属性值，如 $basic-border: 1px solid black; ，或以逗号分割的多个属性值，

2、变量引用

　　凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。css生成时，变量 会被它们的值所替代。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此 变量的地方生成的值都会随之改变。

嵌套css 规则

嵌套选择器

示例：

.site-footer .footer-container .footer-menu { display: flex; width: 773px; justify-content: space-between; line-height: 3;li{ font-size: 14px; a:hover { color: #fff; } &:first-child{ font-size: 16px; color: #eee; }} }

 

嵌套属性
　　在sass中，除了css选择器，属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么 糟糕，但是要反复写 border-style 、 border-width 、 border-color 以及 border-* 等也是非 常烦人的。在sass中，你只需敲写一遍border：
sass中的注释

　　sass中提供了两种注释方式，分别是：
　　　　1. css标准注释 /* 注释内容 */ ,该注释会出现在编译结果中
　　　　2. 静默注释 // 注释内容 该注释仅会出现在sass代码中

混合器
　　如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理 这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代 码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。

简单混合器
@mixin定义一个混合器， @include 来引用混合器名称
示例：

//使用@mixin定义一个混合器，混合器的书写跟css代码块一样，可以定义多个规则 @mixin flex-container{ display:flex; flex-wrap: wrap; justify-content: space-between; } //其他的代码块中均可以使用该混合器 .main{ font-size:1.1em; color:inherit; @include flex-container;//使用混合器 } .container{ background: lightblue; @include flex-container;//使用混合器 }

 

混合器传参
　　混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器 生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。如果你接触 过函数，这种方式跟函数非常相似：
　　当混合器被@include时，你可以把它当作一个css函数来传参。
混合器参数的默认值
　　为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使 用 $name: default-value 的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的 引用，

解决浏览器兼容性问题

浏览器内核

浏览器类型 内核 js引擎 ie trident jscript firefox gecko tracemonkey chrome webkit,blink v8 safari webkit squirrelfish extreme opera presto carakan

使用css hack解决兼容性问题

浏览器在读取css代码的时候可能会遇到一些无法识别的代码，造成这种现象的原因通常有两种：
　　1. 代码本身有问题，如： bg:red ，bg并不是一个有效的css属性
　　2. 代码没问题，但浏览器的内核不能识别，如： box-sizing:border-box ，这句代码本身没 有问题，但由于使用的是css3的属性 box-sizing ，会造成在一些低版本内核的浏览器中无 法识别。

一些浏览器的这两点特性：
　　1.不同内核的浏览器可以识别自己特有的css属性
　　2.浏览器遇到无法识别的css属性，会直接跳过
正是由于浏览器的这种特点，给我们解决兼容浏览器兼容性问题打开了一条通道。而css hack技 术，就是通过书写一些让特定浏览器识别的代码来解决兼容性问题的。

渐近增强和优雅降级
　　网页在新版本的浏览器中要应用新的效果；网页在旧版本的浏览器中可以没有 新的效果，但不要布局错乱。

　　针对不同的侧重点，于是出现了两种静态页面的开发思路，它们分别是渐近增强（progressive enhancement）和优雅降级（graceful degradation）。

　　　　渐进增强是指：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行 效果、交互等改进和追加功能达到更好的用户体验。

　　　　优雅降级是指：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

它们的区别在于：

　　1、优雅降级以新版本浏览器为目标，从现状开始，并面向低版本浏览器，逐渐减少用户体验的 供给。
　　2、渐进增强以旧版本浏览器为目标，从一个非常基础的，能够起作用的版本开始，并不断扩 充，以适应新版本浏览器的需要。
　　3、 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地 带。

优雅降级会优先书写新标准中的属性，以适应新版本浏览器，然后再补充旧版本浏 览器中的书写方式，
渐近增强会优先书写浏览器特有的属性，以适应旧版本浏览器，然后再补充新标准中的属性

转载于:https://www.cnblogs.com/lyl-0667/p/11050919.html

总结

以上是尊龙游戏旗舰厅官网为你收集整理的css工程化和浏览器兼容性问题的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。