CSS secret 笔记

2018-11-03 13 min read

showcase for putup

浏览器支持和退回

某些特性需要加浏览器前缀
标准语句写在最后
退回语句写在最前面，适应低版本浏览器

CSS

background: rga(255,128,0);
background: -moz-linear-gradient(90deg,yellow,red);
background: -webkit-linear-gradient(90deg,yellow,red);
background: -o-linear-gradient(90deg,yellow,red);
background: linear-gradient(90deg,yellow,red);

使用 modernizr 给根元素html 添加辅助类
针对支持或不支持的浏览器分别写样式 , textshadow 或者 no-textshadow

CSS

h1 { color: gray;}
.textshadow h1 {
	color: transparent;
	text-shadow: 0 0 .3em gray;
}

@supports，可以看做『原生』的 modernizr

CSS

h1 { color: gray;}
@supports (text-shadow: 0 0 .3em gray;) {
	h1 {
		color: transparent;
		text-shadow: 0 0 .3em gray;
	}
}

JS 检测，在 element.style 对象上检查属性是否存在

Javascript

var root = document.documentElement;
if ('textShadow' in root.style) {
	root.classList.add('textshadow');
}
else {
	root.classList.add('no-textshadow');
}

检查属性值是否被支持,创建一个不可见的元素

Javascript

var root = document.documentElement;
var dummy = document.creatElement('p');
dummy.style.backgroundImage = 'linear-gradient(red,tan)';
if (dummy.style.backgroundImage) {
	root.classList.add('lineargradients');
}
else {
	root.classList.add('no-lineargradients');
}

浏览器可以解析某个css特性，并不代表他已经实现了该特性

css2升级到3版本号的特性

syntax
cascade
color
selectors
background
values
text
decorators
fonts
ui

css3版本后新特性

transform
compositing
effects
masking
flexbox
grid
variables
calc(), color()

w3c，制定标准，浏览器前缀是历史包袱。新实验特性需要通过在浏览器中配置开关开启，防止开发者在生产环境中使用。

技巧

减少代码重复

可变的字号可以相对父级，行高用比例，其他尺寸用 em

CSS

font-size: 125%;
line-height: 1.5;
padding: .3em .8em;

渐变主题配色，渐变遮罩，主题颜色直接改变background-color

CSS

button {
	background: #58a linera-gradient(hsla(0%,0%,100%,.2),transparent);
}
button.cancel {
	background-color: #c00
}
button.ok {
	background-color: #6b0
}

currentColor 如果不指定颜色，自动从文本颜色中取得颜色

CSS

hr {
	background: currentColor;
}

继承,让超链接颜色与页面文本一致，伪元素自动继承背景边框样式

CSS

input, select, button { font: inherit;}
a {color: inherit;}
.callout::before {
	background: inherit;
	border: inherit;
}

视觉差异 文本，减少顶部和底部的padding会看起来比较整齐 media query 应该面向设计而不是设备

用百分比取代固定长度，或者 vw vh vmin vmax
需要在较大分辨率下的到固定宽度，用max-width,可以适应小分辨率
为替换元素(img object video iframe)设置max-width，100%
多列文本时，指定column-width 而不是 column-count，可以自适应小屏幕
合理使用简写：

CSS

background: url(1.png) top right,
			  url(2.png) bottom right,
			  url(3.png) top left;
background-size: 2em 2em;
background-repeat: no-repeat;  // 抽出重复的属性
background：url(1.png) top right/2em 2em; // position 需要用斜杠区分 size，因为position可能是百分比没法区分。

css自定义属性

CSS

	ul {--accent-color: purple;}
	ol {--accent-color: rebeccapurple;}
	li {background: var(--accent-color);}

边框和背景

通常背景会侵入boder 可以用background-clip 裁剪，默认值是border-box

CSS

border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;

多重边框 box-shadow, insert

CSS

background: yellowgreen;
box-shadow: 0 0 0 10px #655,
			  0 0 0 15px deeppink;

outline 模拟虚线边框或者描边

CSS

background: yellow;
boreder: 10px solid #655;
outline: 5px solid deeppink;
outline-offset: -5px; // 接受负值，内边距

背景位置 Background-position 拓展语法接受具体像素

CSS

padding: 10px;
background: url(code.svg) no-repeat bottom right #58a;
background-position: right 10px bottom 10px;
background-origin: content-box; // 默认是padding box, 设置 content 避免跟padding产生耦合

calc() 动态计算

CSS

background: url(code.svg) no-repeat bottom right #58a;
background-position: calc(100%-10px) calc(100%-10px);

边框内圆角 outline不带圆角，shadow带圆角

CSS

background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;

条纹背景

CSS

background: linear-gradient(#fb3 50%, #58b 50%);
background: linear-gradient(#fb3 30%, #58b 30%); // 不等宽
background: linear-gradient(#fb3 30%, #58b 0); // 位置设成0，表示跟前一个色标位置一样
backgroound-size: 100% 30px; // 调整背景尺寸，渐变会重复

background: linear-gradient(to right , #fb3 30%, #58b 0);  // 垂直条纹

斜条纹：

CSS

background: linear-gradient(45deg, #fb3 25%, #58b 0, #58b 50%, #fb3 0, #fb3 75%, #58b 0); // 四个，平铺拼成一个
background-size: 42.42px 42.42px // 计算根号2
// 用循环渐变
background: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58b, #58b 15px);
background: repeating-linear-gradient(45deg, #fb3, #58b 30px);

复杂的背景图案

网格：

CSS

background: #58a
background-image: linear-gradient(white 1px, transparent 0), linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;

波点：

CSS

background: #655;
background-image: radial-gradient(tan 30%, tansparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px; //重复平铺

用mixin处理：

CSS

@mixin polka($size, $dot, $base, $accent) {
	background: $base;
	background-image: radial-gradient($accent $dot, transparent 0);
	background-size: $size $size;
	background-position: 0 0, $size/2 $size/2;
}
@include polka(30px, 30%, #655, tan);

棋盘： Svg实现最好，svg可能会增加http请求。但是可以把svg以dataurl的形式内嵌到样式表中，甚至不需要base64。

CSS

background: #eee url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25"><rect x="50" width="50" height="50"/><rect y="50" width="50" height="50"/></svg>");
background-size: 30px 30px;

角向渐变：创建色轮：

CSS

background: conic-gradient(red, yellow,lime,aqua,blue,fuchsia,red);
background: repeating-conic-gradient(#bbb 0,#bbb 25%,#eee 0,#eee 25%); //角向渐变实现棋盘
background-size: 30px 30px;

混合模式： background-blend-mode，类似ps混合模式

伪随机背景 把条纹从一个平面拆散为多个图层，一个颜色作为底色，另外三个颜色做条纹，不同间隔进行重复。 背景间隔用质数，最大限度避免重复

background: hsl(20, 40%, 90%);
background-image:
	linear0gradient(90deg, #fb3 11px, transparent),
	linear0gradient(90deg, #ab4 23px, transparent),
	linear0gradient(90deg, #666 41px, transparent);
background-size: 41px 100%, 61px 100%, 83px 100%;

连续的图像边框

border-image 是九宫格伸缩

CSS

border-image: 33.34% url(...) stretch; // 拉伸
border-image: 33.34% url(...) round; // 中部平铺

用border-image适合做做脚注线段

CSS

border-top: .2em solid transparent;
border-image: 100% 0 0 linear-gradient( 90deg, currentColor 4em, tranparent 0);

background-clip 多重背景最底层设置背景

CSS

background: linear-gradient(white,white), url(a.jpg)
background-size: cover;
background-clip: padding-box, border-box;
background-origin: padding-box;

信封边框：

CSS

background: linear-gradient(white,white) padding-box,
		repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/ 5em 5em;
border: 1em solid transparent;

蚂蚁行军动画：

CSS

@keyframes ants { to {background-position: 100%}}
.mar-ants {
	border: 1px solid transparent;
	background: linear-gradient(white,white) padding-box,
		repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0/.6em .6em;
animation: ants 12s linear infinite;
}