FE.CSS-Sultana后记：纯css也能写col,select,datepicker,carousel...

时间  2019-11-09
标签 fe.css css sultana 后记 col select datepicker carousel 栏目 CSS 繁體版
原文   原文链接
未完待续

背景

现在css3愈来愈发达，focus-within等属性也已经开始在Chrome获得支持。若是有出色的css功底，一点点ps技能，你也能用css3配合原生html标签写出优秀的框架。经过对css3的实践，我发现自定义原生控件并非什么难事，因而小试牛刀写了个 纯CSS3实现Material Design。javascript

关于

关于本文的全部代码实现，以及更多纯css控件，请在 https://github.com/Seasonley/... 中查看。
本文针对本人开发的纯css框架Sultana中重要的几个经常使用组件进行深刻分析，与你们探讨如何一步步构思实现，包括：css

  1. var(--x) 写栅格系统
  2. focus-within & a & input 写下拉选择控件
  3. input radio & date 实现日期选择控件
  4. background linear-gradient:一个有争议的scroll_indicator实现方式
  5. css动画 + css变量 写自适应大小轮播控件
  6. 导航栏之：focus-within 侧边栏导航滑出
  7. 导航栏之：summary折叠导航，秒杀bulma静态样式
  8. input range 能够写五星好评啦
  9. 友好的tooltip，transform 大法

1.var(--x) 写栅格系统 （源码）

众所周知Bootstrap栅格系统 提供了不一样设备宽度下的12栅格，那么咱们如何战胜Bootstrap，用css3变量实现一个强大的自适应栅格呢？html

1.1 声明不一样设备的css变量名称

假设咱们考虑4种设备，以下方表格所示。仿照Bootstrap咱们将他们命名为sm,md,lg。前端

su-col 特小屏(-,480px) 小屏(480px,720px) 中屏(720px,1200px) 大屏(1200px,+) 固定数值(覆盖以上变量)
css变量名 --sm --md --lg --col
类型 int(1 , 2 , ... , 12) int(1 , 2 , ... , 12) int(1 , 2 , ... , 12) number(90% , 0.3 , ...)

那么col干什么用？最终容器的宽度应该转换成单一变量，前面3者都是辅助。假设咱们的布局以下html5

<div su-row>
    <div su="primary" su-col style="--sm:3;--md:4;--lg:12;--sm-v:hidden"></div>
    <div su="light" su-col style="--sm:3.2;--md:4.5;--lg:12;"></div>
    <div su="info" su-col style="--sm:3.3;--lg:12;"></div>
</div>
<div su-row>
    <div su="warning" su-col style="--col:0.22;--sm-d:none"></div>
    <div su="info" su-col style="--col:0.33;"></div>
    <div su="primary" su-col style="--col:0.44;"></div>
</div>

1.2 --col: calc(var(--md) / 12)

咱们但愿不一样设备的col宽度按照变量自适应，还能够有display和visiblity这些辅助操做，接下来看css实现，以-md为例子，代码以下。java

@media screen and (min-width: 721px) {
    div[su-col] {
        --col: calc(var(--md) / 12);
        display: var(--md-d);
        visibility: var(--md-v);
    }
}

接着只要在su-col中使用var(--col)就能搞定自适应。代码以下。jquery

div[su-col] {
 width: calc(100% * var(--col));
}

是否是很轻松，每一行都是精华。若是直接用--col，那适配变量失效，这一般用在不须要适配的场景下。
图片描述android

1.3 flex布局简写

flex布局逐渐代替浮动布局，那么自定义一些简写的class来让代码看起来更整洁也是很是有必要的。本人提供一个实现方式，并不必定受欢迎，不感兴趣能够跳过。css3

flex属性缩写参照：git

  • j=justify,a=algin,c=content
  • 100,001,010,101=start,end,center,between
  • -row=row-reverse
  • -warp=warp-reverse
  • !warp=no-warp

html示例

clipboard.png

2. focus-within & a & input 写下拉选择控件 (源码)

2.1focus-within这么用

看这个标题就秘制重量级，下拉控件很差办，不少css框架都只能div套啊套的，再用js搞点数据绑定。不过既然有focus-within。咱们先脑补一下，点击这个a标签，a+div里的input[radio]都显示，不focus则隐藏。这解决了下拉动画效果。那么鼠标通过要高亮，input又不能写文字，也没有伪元素能够弄dataset，那只好input+span组合一下了。假设html部分代码以下。

<button su="outlined -">
    <a href="javascript:">(blank)</a>
    <ul>
        <input checked type="radio" name="ra" value=""/>
        <span>(blank)</span>
        <input title="A.dada" type="radio" name="ra" value="1"/>
        <span>A.da</span>
        <input title="B.huha" type="radio" name="ra" value="2"/>
        <span >B.la</span>
    </ul>
</button>

这样看来彷佛能写个导航栏了呢，多个按钮拼一下什么的。

2.2选中的移到最上面

如标题，接下来解决选中项的显示，很简单，absolute绝对定位嘛。

button[su~="-"] input:checked+span {
    position: absolute;
    top: 0px;
}

图片描述

默认来个value=""的，文字为(blank)，算是很尴尬的委屈求全了，缺点是选中项再也不在下拉列表中显示了，其次文字是不能点击选中的，只能点空白处。

3. input radio & date 实现日期选择控件 (源码)

3.1 31个input

有意思，看完上面的奇葩实现select,你应该对这个更感兴趣一点。做为一个前端你不会本身写日期控件，你好意思吗你？成天用jquery-datepicker你的良心不会痛吗？这回咱们再尬一回，用css和少许的js代码来实现。尬在哪呢？31个input[radio]，谁会用啊，可能只有那些禁用js的浏览器的需求方须要这个。

3.2 少许的js

oninput的时候须要算出闰年+这个月1号星期几，把它放到dataset,由css枚举1号的7种星期状况，css枚举大月小月和闰年2月。（这行描述最重要）
代码实现以下

html

<form oninput="ymd.value=y.value+'-'+('0'+m.value).slice(-2)+'-'+d.value;ymd.dataset.leap=(y.value % 4 == 0) && (y.value % 100 != 0 || y.value % 400 == 0);ymd.dataset.day=new Date(y.value+'-'+('0'+m.value).slice(-2)+'-1').getDay()" 
onclick="ymd.value=y.value+'-'+('0'+m.value).slice(-2)+'-'+d.value"
onmouseover="ymd.dataset.day=new Date(y.value+'-'+('0'+m.value).slice(-2)+'-1').getDay()">
    <label su-date>
            <input su type="date" name="ymd" readonly>
            <div>
                <input name="y" type="number" min="1970" max="3000" value="2000" 
                onchange="this.setAttribute('value', this.value)">
                <input name="m" type="number" min="1" max="12" value="1" 
                onchange="this.setAttribute('value', this.value)">
                <div>
                    <input name="d" type="radio" value="01" checked>
                    <input name="d" type="radio" value="02">
                    ...

css

label[su-date] input[type="number"][value="2"]+div input[type="radio"]:last-of-type,
label[su-date] input[type="number"][value="4"]+div input[type="radio"]:last-of-type,
label[su-date] input[type="number"][value="6"]+div input[type="radio"]:last-of-type,
label[su-date] input[type="number"][value="9"]+div input[type="radio"]:last-of-type,
label[su-date] input[type="number"][value="11"]+div input[type="radio"]:last-of-type,
label[su-date] input[type="number"][value="2"]+div input[type="radio"][value="30"],
label[su-date] input[type="number"][value="2"]+div input[type="radio"][value="29"] {
    display: none
}

label[su-date] input[name="ymd"][data-leap="true"]+div input[type="radio"][value="29"] {
    display: block
}

label[su-date] input[name="ymd"][data-day="1"]+div input[type="radio"][value="01"] {
    margin-left: calc(0 * var(--x2))
}

label[su-date] input[name="ymd"][data-day="2"]+div input[type="radio"][value="01"] {
    margin-left: calc(1 * var(--x2))
}

label[su-date] input[name="ymd"][data-day="3"]+div input[type="radio"][value="01"] {
    margin-left: calc(2 * var(--x2))
}

label[su-date] input[name="ymd"][data-day="4"]+div input[type="radio"][value="01"] {
    margin-left: calc(3 * var(--x2))
}

label[su-date] input[name="ymd"][data-day="5"]+div input[type="radio"][value="01"] {
    margin-left: calc(4 * var(--x2))
}

label[su-date] input[name="ymd"][data-day="6"]+div input[type="radio"][value="01"] {
    margin-left: calc(5 * var(--x2))
}

label[su-date] input[name="ymd"][data-day="0"]+div input[type="radio"][value="01"] {
    margin-left: calc(6 * var(--x2))
}

缺点:老长老长的html和css...
预览：
图片描述

4. background linear-gradient:一个有争议的scroll_indicator实现方式

在掘金上看到网易考拉前端写的CSS Scroll Indicator —— 纯CSS 滚动指示器，实现方式很巧妙，经过直角三角形背景的顶部界面与页面高度相关性制造一个实际上滚背景，看起来在伸缩进度条的效果。该文提到已知的2个缺点。

  1. 文档内容太少（高度过小）的话，进度条呈箭头形，不美观（可考虑加毛玻璃效果来弱化）
  2. background-size: 100% calc(100% - 99vh); 中的99vh是相对值，如果视窗高度比较小，进度条会填不满进度条槽（可考虑加min-height来弱化）

那它放到实际项目中效果如何呢，本人试验了一下，在篇幅很长，标签元素嵌套不少的页面中加入scroll_indicator,滚动过程当中背景重绘十分卡，以致于元素按钮点开都不能及时响应。因此若是是纯文本博客或者说明文档之类的元素标签和css足够少的状况下，可使用该方式实现静态文档的进度条，复杂的dom和css状况下不建议使用。当本人放到本身项目中测试时，按住滚动条上下快速拖动时，滚动条都是跳帧的。。。

5. css动画 + css变量 写自适应大小轮播控件 (源码)

Bootstrap轮播控件经过js实现，那么css能实现吗，显然是能够的。实现到什么程度呢？本人枚举如下能够实现功能：

  1. 自适应屏幕，宽高可控
  2. 轮播图片有单独的自定义标题标签（不能是伪元素）
  3. 要有圆点指示器，圆点大小可自定义，高亮的圆点表明滚动到第几章图
  4. 指示器可点击，跳转到对应的图
  5. 鼠标hover在控件上暂停轮播

看上去很全了，本人讲一下具体思路。
轮播须要假设在absolute的画布上横向滚动，改变元素的水平位移数值margin-left来实现。经过css关键帧动画能完成。以下：

@keyframes rua {
     0%,20% {margin-left: 0}
    25%,40% {margin-left: calc(0px - 1*var(--w))}
    45%,60% {margin-left: calc(0px - 2*var(--w))}
    65%,80% {margin-left: calc(0px - 3*var(--w))}
    85%,100%{margin-left: calc(0px - 4*var(--w))}
}

指示器能够同新标签，但不能像标题元素包裹在图片容器内，由于指示器是不能滚动的。因而绝对定位相对于整个控件容器内就能够。html代码以下：

<aside su="." style="--w:400px;--h:300px;--p:20px;">
    <button></button><button></button>
    <button></button><button></button>
    <button></button>
    <ul>
        <li style="background:gray;"><a>标题1</a></li>
        <li style="background:orange;"><a>标题2</a></li>
        <li style="background:teal;"><a>标题3</a></li>
        <li style="background:blue;"><a>标题4</a></li>
        <li style="background:black;"><a>标题5</a></li>
    </ul>
</aside>

在上述5点功能中，
<1><3>能够用css变量解决，好比--w:400px;--h:300px;--p:20px;实现了宽度400px，高度300px,圆点大小直径20px的控件。
<2>单独设a标签
<4>用focus-within实现点击后css动画暂停在某个关键帧,缺点一是：有几个图就要写几个动画，缺点二是：点击后虽然选中了，但鼠标移出控件不会继续滚动，在控件外点击会跳回初始动画关键帧。以一个图的动画为例：

aside[su~="."] button:nth-child(5):focus-within~ul {
    animation: ma5 .5s ease-out forwards;
}
@keyframes ma5 {
    100% {margin-left: calc(-4 * var(--w))}
}

<5>经过hover的暂停css动画来控制

aside[su~="."] button:hover,
aside[su~="."] ul:hover {
    will-change: transform;
    animation-play-state: paused;
}

总体效果还不错：
图片描述

进阶方案 css-scroll-snap

6. 导航栏之：focus-within 侧边栏导航滑出 (源码)

在没出现focus-within以前，用临近元素选择器+css能实现纯css的下拉选项的导航栏，在这里就很少展开了。最后一个focus-within的魔法魅力。咱们须要实现相似android侧边栏滑出的效果。
图片描述

网上已经有人实现了《CSS :focus-within》 Airen的博客，那我就讲一下他是如何实现的。该文中用到了移动端延伸出的冷门css属性touch-action: manipulation。CSS属性 touch-action 用于指定某个给定的区域是否容许用户操做，以及如何响应用户操做（好比浏览器自带的划动、缩放等）(MDN)。移动端300ms延迟，就可使用 touch-action: manipulation; 来解决。咱们只须要实现点击左上角按钮后滑出菜单，声明一下按钮点击不影响其手势操做就好了。

本控件只要实现focus-within后动画弹出菜单。失去焦点的时候弹回去就好了。其实和touch-action没什么关系。先定义菜单部分的css，将其扔到左边屏幕外（margin或者transform都行）:

#nav-content
transform: translateX(-100%);
transition: transform .3s;

再定义选中后的菜单：

#nav-container:focus-within #nav-content {
    transform: none;
}

大体思路就是这样。讲了那么多focus-within的相关内容，但国内部分webkit内核浏览器还在50如下的阶段，还请各位使用chrome63以上版本访问。

7. 导航栏之：summary折叠导航，秒杀bulma静态样式 (源码)

先来看看 bulma 是怎么写的
clipboard.png

ul li p a 相互嵌套，没错是个很好的实现方式，若是加focus-within和相邻元素选择也能实现点击后的动画效果，不过要稍微改变一下嵌套方式，但这不是本文的讨论重点。focus-within有它的缺点，对于一个菜单来讲，用户好不容易展开找到了，一点别的菜单层级，以前的全缩回去了，那怎么行。必需要有一个展开后点击再缩回去的功能。

这就要引出神奇的summary标签，只用配合details用时，当details内的summary元素被点击时，details所有显示，再次点击缩起只剩summary。在张鑫旭大神的借助HTML5 details,summary无JS实现各类交互效果中提到了不少可实现的控件，树，菜单等等。

本人仿照Bulma用summary特性实现了一个带动画的导航菜单，代码还算优雅，以下图所示。
图片描述

进阶 css-position-sticky

8. input range 能够写五星好评啦 (源码)

一个原生的范围输入控件，在浏览器是十分简陋的，因此并木有人想去用原生的。咱们看一下蚂蚁金服前端团队是怎么实现的（ant.desgin）：

图片描述

貌似是section>ul>li,再加class表示zero full 的小星星，移上去还有动画，又是一堆class。咱们先不考虑动画的实现，先来吐槽这个dom多了以后渲染class的性能问题，li里面又有2个半的小星星来支持step=0.5的打分，这些原生浏览器都支持的属性何须用2+5*3=17个dom元素生成？光说不练假把式，赶忙拉出个代码来溜溜。

首先是html，就一行~

<input su="star" value="1" min="1" max="5" type="range" onchange="this.setAttribute('value', this.value)" />

其次是css:

input[type="range"][su~="star"] {
    cursor: pointer;width: calc(16px * 5);height: 16px;
    -webkit-appearance: none;-webkit-mask-image: var(--star);
    background: linear-gradient(to right, var(--Primary), var(--Primary)), 
                linear-gradient(to right, var(--Gray), var(--Gray));
    background-repeat: no-repeat;
}

input[type="range"][su~="star"][value="1"] {
background-size: calc(16px * 1) 16px, calc(16px * 5) 16px;
}

input[type="range"][su~="star"][value="2"] {
    background-size: calc(16px * 2) 16px, calc(16px * 5) 16px;
}
...

经过不一样属性的input背景，将小星星呈现出不一样的颜色，linear-gradient渲染出进度，若是是半星也好办，在step=0.5的状况下多枚举几个.5的分数状况就行。效果以下：
图片描述
进阶：表开发注意事项

9. 友好的tooltip，transform 大法 (源码)

transform在上文的实现android滑动菜单有提到，再扩展一下它的其余用途。咱们能够用来写tooltip。对于一个title属性的标签，众所周知鼠标悬浮会显示一个方框，内容是title属性的值。那么伪元素的content: attr刚好能配合transform 构造不一样方位的tooltip。

[su-hint~="bottom"]:after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

[su-hint~="bottom"]:hover:after {
    transform: translateX(-50%) translateY(8px);
}

[su-hint~="right"]:after {
    margin-bottom: -14px;
    left: 100%;
    bottom: 50%;
}

[su-hint~="right"]:hover:after {
    transform: translateX(8px);
}

图片描述

github上早有强大的自定义tooltip了，若是你愿意牺牲before after 2个伪元素实现tooltip的气泡和箭头，建议使用hint.css

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程