龙喵专栏 /前端 /内容

《中国第五届 CSS 大会》参会总结

版权声明:龙喵网
网站网址:http://ailongmiao.com/

本次大会共有 7 个主题:

  1. 新时代 CSS 布局。陈慧晶
  2. 剖析 css-tricks 新版,为你所用。大漠
  3. CSS 创意与视觉表现。张鑫旭
  4. CSS 生成艺术。袁川
  5. 你(可能)不知道的五个 CSS 新特性。勾三股四
  6. 10 things I wish CSS authors knew about animations。Brian Birtles
  7. CSS TIME。陈在真

下文若引用了相关主题的内容,则会用对应的角标 n 标出

聊几个有意思的技术点。

margin: auto

margin: auto 配合 display: flex 带来的惊喜 1

示例1:轻松实现水平垂直居中(在线预览

水平垂直居中

关键代码:

<div class="demo1">
  <div class="cont"></div>
</div>

<style>
.demo1 {display: flex;}
.demo1 .cont {margin: auto;}
</style>

示例2:一层 HTML 结构实现左“右”布局(在线预览

实现左“右”布局

关键代码:

<ul class="demo2">
  <li>首页</li>
  <li>动态</li>
  <li>话题</li>
  <li>活动</li>
  <li>登录 &nbsp; 注册</li>
</ul>

<style>
.demo2 {
  display: flex;
}
.demo2 > li:last-child {
  margin-left: auto;
}
</style>

@supports

@supports 是 CSS 的特性查询。它定义的一组规则,只有当浏览器支持的时候才会生效。非常适合做一些纯 CSS 层面的渐进增强和优雅降级。

@supports (display: grid) {
  div {
    display: grid;
  }
}

@supports not (display: grid) {
  div {
    float: right;
  }
}

CSS Conditional Rules 共有四个规则,分别是:

  • @supports 特性查询
  • @media 媒体查询
  • @import 引入外链样式的
  • @document 基于 url 加载样式(尚在实验中)

详见 CSS Conditional Rules Module Level 3

这种特性检测也有对应的 JS API CSS.supports()

var result = CSS.supports('display: grid'); // 返回 boolean
var result = CSS.supports('display', 'grid'); 

CSS 的边界技巧

技巧是灵活运用 CSS 属性值的“有效”区间。

eg. opacity 3
当它的值小于 0 时,会被当成 0 处理;当它的值大于 1 时,会被当成 1 来处理。所以,用它就可以实现 CSS 里的 Boolean 值了。比如下面的效果 3在线预览

CSS 的边界技巧

eg. CSS 渐变里的 <color-stop> = <color> <length-percentage>?
<length-percentage>的值比它上一个颜色的位置的值小时,则会被“修正”成和上一个位置相等的值。这样就可以“偷懒”实现下面的效果了:在线预览

CSS 渐变

<length-percentage>之所以这样“修正”,是和渐变本身的特性相关的。详见深入理解 CSS linear-gradient

css-doodle

css-doodle 的效果简直是太惊艳了,我只想说袁川是一名拿着 CSS 画笔的画家。在线欣赏他的各种作品 codepen.io/collections

基础素材:各种形状(直线/虚线/圆角/圆形/半圆/三角形/多边形等)和 Unicode 字符(等)
方式:平铺、随机、数量(等)
配色:Color HuntCoolors.co(等)
画龙点睛:设计感和思考力(等)

后面都加了“(等)”,是因为这些都是我作为一名观众的心得,比较主观

关于 css-doodle 更准确的信息,可查看其源码 yuanchuan/css-doodle

其它

  • 滚动特性 2,5
    • 自定义滚动条样式
      • scrollbar-width
      • scrollbar-color
    • 让锚点定位的滚动更“平滑”。性价比很高的一个特性
      • scroll-behavior: smooth
    • 让由触摸滑动或鼠标滚轮触发的滚动更精细
      • scroll-snap-type: x|y|both mandatory|proximity 滚动-捕捉-类型
      • scroll-snap-align: none|start|end|center 滚动-捕捉-对齐
      • scroll-snap-stop: normal|always 滚动-捕捉-停止
      • 详见 CSS Scroll Snap Module Level 1
  • 可变字体 5
    • 好处是加载一个字体文件,便可以得到不同风格的字体。你可以动态设置它的width weightstyle
    • 在线体验功能 Variable Fonts
    • 入门可查看 Variable fonts guide
  • 设置打印样式 5
    • @media print {}

更多

 

版权声明:龙喵网
网站网址:http://ailongmiao.com/

作者:anjia

来源:https://github.com/anjia/blog/issues/58

1.部分文章来自网络,如有侵犯权益,请联络博主,资源失效与内容勘误留言说明.

2.如若转载,请注明出处:http://ailongmiao.com/read/621.html

[ web前端导航 ]:http://ailongmiao.com/web/

相关阅读

    评论

    继续阅读

    无障碍 Web 开发

    无障碍 Web 开发

    Web前端 2019-06-04 5

    良好的 Web 可访问性,就是把你的网站建设成让尽可能多的人都觉得好用,可以让每一个人受益。语义化 HTML 也是确保 Web 良好访问性的

    禁止用户打开HTML页面调试

    Web前端 2019-05-18 5

    有时为了防止别人调试我们的HTML页面,盗取代码等行为,介绍一些能够阻止用户在浏览器中打开调试窗口的方法,这些方法只能一定程度的提

    细数CSS伪元素及其用法

    Web前端 2019-03-29 12

    CSS中有两个很常见的概念,伪类和伪元素。伪类用于在页面中的元素处于某个状态时,为其添加指定的样式。伪元素会创建一个抽象的伪元

      选择打赏方式

    打赏

    打赏