【前端词典】11 个 CSS 知识搭配 11 个 JS 特性 (实用合集)

前言

这篇文章我会介绍 11 在开发过程中经常遇到的 CSS 相关知识点,以及 11 个有趣亦实用的 JavaScript 特性。

这些都是我在日常开发中总结而来,想必于你也是有或多或少的帮助。

文中的代码发布在 gitHub:https://github.com/wanqihua/blog ,想了解的朋友可以前往。

11 个常见的 CSS 知识点

声明,这里也包含了部分 CSS 预处理器知识,愿各位不要纠结于此。

1. position:fixed 降级问题

不知道曾经的你是不是遇到吸顶效果,就是使用 position:fixed 这个属性。其实如果其父元素中有使用 transformfixed 的效果会降级为 absolute

解决方案:

既然会降级为 absolute 效果,我们该怎么解决这个问题呢?我们就改考虑什么情况下 fixedabsolute 的表现效果会是一样的。

即当使用 fixed 的直接父元素的高度和屏幕的高度相同时 fixedabsolute 的表现效果会是一样的。

如果这个直接父级内的元素存在滚动的情况,那就加上 overflow-y:auto

2. 合理使用变量

一般设计稿中的某一类的文字(元素)都是用相同的字体大小、颜色、行高等样式属性,所以这些值我们不必每次都重复写,因为当 UI 更新设计方案,你需要改的地方就很多了。这些重复使用的值我们完全可以存放在变量里面。

Sass 和 Less 稍微有点区别:

// sass	
$direction: left;	
// less	
@direction: left;

当然 CSS 原生也是存在变量的,使用规则如下:

变量定义的语法是:--;// *为变量名称。);

  1. 无论是变量的定义和使用只能在声明块 {} 里面

  2. CSS 变量字符限制为:[0-9]、[a-zA-Z]、_、-、中文和韩文等。

:root {	
    --blue_color: #3388ff;	
    --main_bgcolor: #fafafa;	
    --font_size_12: 12px;	
    --font_size_14: 14px;	
    --color: 20px;	
}	
.div1{	
    background-color: var(--main_bgcolor);	
    font-size: var(--font_size_12);	
}

3. 使用 Mixin 归类重复样式

和重复变量一样,重复的样式也可以归类。我觉得优秀的代码其中有一条肯定是代码的复用性强。

之前我们写 CSS 的时候,也会将一些重复使用的代码放在一个 class 中,这样的确达到了一定的复用性,不过最后的效果可能就是在一个元素里面放了很多 class,如下图:

【前端词典】11 个 CSS 知识搭配 11 个 JS 特性 (实用合集)_第1张图片

这样下一个接手得人难免会有点迷糊,而且这样会造成样式越来越难修改。

这个时候,mixin( 可以理解成 class 中的 class )就能发挥它的作用了。

这是一个描述性文字的样式:

.font-description {	
    .font-des-style(24px,#fff,1.5em);	
    .line-camp(2);	
}	
// less	
/* 多行显示 */	
.line-camp( @clamp:2 ) {	
    text-overflow: -o-ellipsis-lastline;	
    overflow: hidden;	
    text-overflow: ellipsis;	
    display: -webkit-box;	
    -webkit-line-clamp: @clamp;	
    -webkit-box-orient: vertical; 	
}	
.font-des-style( @fontSize, @color, @lineHeight, @textAlign:left ) {	
    font-size: @fontSize;	
    color: @color;	
    line-height: @lineHeight;	
    text-align: @textAlign;	
}

这只是一个简单的例子,我们可以把可复用的样式放在 mixin 中,这样接手项目的人只需要熟悉你写的 mixin.less 就可以开始迭代需求了

4. 1px 方案

做过移动端需求的前端肯定是避免不了处理 1px 细线问题,这个问题的原因就是 UI 对页面美观度的要求越来越高(不要和我说这是 retina 屏的问题)。

代码如下:

.min-device-pixel-ratio(@scale2, @scale3) {	
  @media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {	
    transform: @scale2;	
  }	
  @media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {	
    transform: @scale3;	
  }	
}	
.border-1px(@color: #DDD, @radius: 2PX, @style: solid) {	
  &::before {	
    content: "";	
    pointer-events: none;	
    display: block;	
    position: absolute;	
    left: 0;	
    top: 0;	
    transform-origin: 0 0;	
    border: 1PX @style @color;	
    border-radius: @radius;	
    box-sizing: border-box;	
    width: 100%;	
    height: 100%;	
    @media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {	
      width: 200%;	
      height: 200%;	
      border-radius: @radius * 2;	
      transform: scale(.5);	
    }	
    @media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {	
      width: 300%;	
      height: 300%;	
      border-radius: @radius * 3;	
      transform: scale(.33);	
    }	
  }	
}	
.border-top-1px(@color: #DDD, @style: solid) {	
  &::before {	
    content: "";	
    position: absolute;	
    left: 0;	
    top: 0;	
    width: 100%;	
    border-top: 1Px @style @color;	
    transform-origin: 0 0;	
    .min-device-pixel-ratio(scaleY(.5), scaleY(.33));	
  }	
}

5. 内联首屏关键 CSS

性能优化中有一个重要的指标 —— 首次有效绘制(FMP),即指页面的首要内容(primary content)出现在屏幕上的时间。这一指标影响用户看到页面前所需等待的时间,而 内联首屏关键 CSS(即 Critical CSS,可以称之为首屏关键 CSS) 能给用户一个更好的心理预期。

如图:

【前端词典】11 个 CSS 知识搭配 11 个 JS 特性 (实用合集)_第2张图片

我们知道内联 CSS 能够使浏览器开始页面渲染的时间提前,即在 HTML 下载完成之后就能渲染了。

既然是内联关键 CSS,也就说明我们只会将少部分的 CSS 代码直接写入 HTML 中。至于内联哪些 CSS 你可以使用 Critical。

6. 文字两端对齐

需求中我们也经常遇到这样的需求,这里直接提供方案。

// html	
<div>姓名</div>	
<div>手机号码</div>	
<div>账号</div>	
<div>密码</div>	
// css	
div {	
    margin: 10px 0; 	
    width: 100px;	
    border: 1px solid red;	
    text-align: justify;	
    text-align-last:justify;	
}	
div:after{	
    content: '';	
    display: inline-block;	
    width: 100%;	
}

效果如下:【前端词典】11 个 CSS 知识搭配 11 个 JS 特性 (实用合集)_第3张图片

7. 样式的顺序

CSS 代码:

.red {	
    color: red;	
}	
.blue {	
    color: blue;	
}

HTML 代码:

<div class="red blue">这是什么颜色</div>	
<div class="blue red">这是什么颜色</div>

记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上)

8. 浏览器会从右到左解析 CSS 选择器

.content_box div p a {	
    // ...	
}

浏览器会对上面的例子做如下的步骤处理:

  1. 首先找到页面所有的  元素

  2. 然后向上找到被 

     元素包裹的  元素

  3. 再向上查找到一直到 .content_box 的元素

从上面的步骤我们可以看出,越靠右的选择器越具有唯一性,浏览器解析 CSS 属性的效率就越高。

所以一定换成使用具体的 class 编写 CSS 代码。

9. 每个单词的首字母大写

其实我第一次看到这个功能的时候就是使用 JS 去实现这个功能:

function capitalizeFirst( str ) {	
    let result = '';	
    result = str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());	
    return result	
}  

直到有一天看到 CSS 也能做这个功能的时候,我才反应过来明明一句 CSS 就能解决的问题,我却使用了更复杂的方案。

CSS 方案如下:

.capitalizeFirst-css {	
    text-transform: capitalize;	
}

是不是特别简单。

text-transform 简单介绍

这是 CSS2 中的属性,参数有 capitalize | uppercase | lowercase | none

参数介绍:

  1. none:默认。定义带有小写字母和大写字母的标准的文本。

  2. capitalize:文本中的每个单词以大写字母开头。

  3. uppercase:定义仅有大写字母。

  4. lowercase:定义无大写字母,仅有小写字母。

从这个属性我们可以知道全部大写(小写)的需求这个属性也能轻易实现。

10. 单选高亮

可能你看到“单选高亮”没反应过来,直接来张图片你就马上清楚了:

【前端词典】11 个 CSS 知识搭配 11 个 JS 特性 (实用合集)_第4张图片

这个需求用 CSS 更方便处理。主要代码就是一段 CSS 代码:

// 省略部分代码,详细代码看仓库	
.input:checked + .colors {	
  border-color: #e63838;	
  color: #e63838;	
}	
<div class="single-check">	
    <input class="input" type="radio" name="colors" value="1">	
    <div class="colors">天空之境</div> 	
</div>

看效果:

【前端词典】11 个 CSS 知识搭配 11 个 JS 特性 (实用合集)_第5张图片

两个选择器的区别

~选择器:查找某个元素后面的所有兄弟元素

+选择器:查找某个元素后面紧邻的兄弟元素

11. 多列等高问题

有三种 CSS 的处理方案:

  1. 每列设置一个很大的 padding,再设置一个很大的负的 margin

  2. 使用 display:table;

  3. 使用 flex

第一种有明显的缺陷:

  1. border-bottom 看不到了

  2. 设置的下方的两个圆角也不见了

所以可以使用 display:table; 或者 flex布局 的方式来实现等高。

【前端词典】11 个 CSS 知识搭配 11 个 JS 特性 (实用合集)_第6张图片

建议不要一味的抵触 table,有的场景还是可以使用的。

11 个有趣实用的 JS 特性

在日常开发中总是和各种 API 打交道,我们名为前端工程师实为 API 调用工程师。这里分享 11 个实用又有趣的 JS 特性,使用得当可以提高你应用的友好性。

1. 监听屏幕旋转变化接口: orientationchange

定义:

这个 API 可以将你手机是否横屏的情况暴露给需要知道的人知道。

使用:

screenOrientation: function(){	
    let self = this;	
    let orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;	
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {	
        self.angle = orientation.angle;	
    });	
},
orientation.angle 值 屏幕方向
0 竖屏
90 向左横屏
-90/270 向右横屏
180 倒屏

通过这个 API 我们在横屏和竖屏的时候可以添加一些动作或者是样式的改变。

如果只是样式的改变也可以通过媒体查询来监听:

/* 竖屏 */	
@media screen and (orientation: portrait) {	
    // some css code	
}	
/* 横屏 */	
@media screen and (orientation: landscape) {	
    // some css code	
}

2. 电池状态:navigator.getBattery()

定义:

这个 API 可以将你手机电池状态的情况暴露给需要知道的人知道。

这个 api 返回的是一个 promise 对象,会给出一个 BatteryManager 对象,对象中包含了以下信息:

key 描述 备注
charging 是否在充电 可读属性
chargingTime 若在充电,还需充电时间 可读属性
dischargingTime 剩余电量 可读属性
level 剩余电量百分数 可读属性
onchargingchange 监听充电状态的改变 可监听事件
onchargingtimechange 监听充电时间的改变 可监听事件
ondischargingtimechange 监听电池可用时间的改变 可监听事件
onlevelchange 监听剩余电量百分数的改变 可监听事件

使用:

getBatteryInfo: function(){	
    let self = this;	
    if(navigator.getBattery){	
        navigator.getBattery().then(function(battery) {	
            // 判断是否在充电	
            self.batteryInfo = battery.charging ? `在充电 : 剩余 ${battery.level * 100}%` : `没充电 : 剩余 ${battery.level * 100}%`;	
            // 电池充电状态改变事件	
            battery.addEventListener('chargingchange', function(){	
                self.batteryInfo = battery.charging ? `在充电 : 剩余 ${battery.level * 100}%` : `没充电 : 剩余 ${battery.level * 100}%`;	
            });	
        });	
    }else{	
        self.batteryInfo = '不支持电池状态接口';	
    }	
},

3. 让你的手机震动: window.navigator.vibrate(200)

定义:

这个 API 可以让你的手机按你的想法震动。

使用:

示例代码如下:

vibrateFun: function(){	
    let self = this;	
    if( navigator.vibrate ){	
        navigator.vibrate([500, 500, 500, 500, 500, 500, 500, 500, 500, 500]);	
    }else{	
        self.vibrateInfo = "您的设备不支持震动";	
    }	
    <!--	
    // 清除震动	
    navigator.vibrate(0);	
    // 持续震动	
    setInterval(function() {	
        navigator.vibrate(200);	
    }, 500);	
    -->	
},

4. 当前语言:navigator.language

定义:

这个 API 可以告诉你当前应该使用什么语言。

如果你需要和我一样做多语言适配,这个 API 或许可以给你提供一个不错的思路。

使用:

【前端词典】11 个 CSS 知识搭配 11 个 JS 特性 (实用合集)_第7张图片

不同浏览器返回的值稍微有点差异。你可以通过以下封装好的方法来消除这种差异:

function getThisLang(){	
    const langList = ['cn','hk','tw','en','fr'];	
    const langListLen = langList.length;	
    const thisLang = (navigator.language || navigator.browserLanguage).toLowerCase();	
    for( let i = 0; i < langListLen; i++ ){	
        let lang = langList[i];	
        if(thisLang.includes(lang)){	
            return lang	
        }else {	
          return 'en'	
        }	
    }	
}

不同的语言就对应不同的语言文案就好。

5. 联网状态:navigator.onLine

定义:

这个 API 可以告诉让你知道你的设备的网络状态是否连接着。

使用:

比如我上午登陆了掘金在看一篇文章,可是没看完就到了吃饭的点,这么热爱学习的我肯定是选择吃完午饭回来继续看。

30 分钟过后……

吃晚饭回到公司,打开电脑继续把那篇文章看完,看完了打算点了赞,发现给了这个提示:

【前端词典】11 个 CSS 知识搭配 11 个 JS 特性 (实用合集)_第8张图片

这个提示让我有点懵(就是没网络了)。

这个时候我们就可以使用这个 API,这样就可以准确的告诉用户“您的网络无法连接,请检查”。这样用户是不是可以有更好的体验呢?

代码如下:

mounted(){	
    let self = this;	
    window.addEventListener('online',  self.updateOnlineStatus, true);	
    window.addEventListener('offline', self.updateOnlineStatus, true);	
},	
methods: {	
    updateOnlineStatus: function(){	
        var self = this;	
        self.onLineInfo = navigator.onLine ? "online" : "offline";	
    },	
}

注意:navigator.onLine 只会在机器未连接到局域网或路由器时返回 false,其他情况下均返回 true。也就是说,机器连接上路由器后,即使这个路由器没联通网络, navigator.onLine 仍然返回 true

6. 页面可编辑:contentEditable

定义:

这个 API 可以使页面所有元素成为可编辑状态,使浏览器变成你的编辑器。

使用:

  1. 你可以在地址栏输入 data:text/html,<html contenteditable>, 这样浏览器就变成了编辑器。

【前端词典】11 个 CSS 知识搭配 11 个 JS 特性 (实用合集)_第9张图片

使用场景:

需求 —— 页面需要一个文本输入框。

  1. 该文本输入框默认状态下有默认文本提示信息

  2. 文本框输入状态下其高度会随文本内容自动撑开

像这样的需求我们就可以使用 contentEditable='true'>

代替