第三届CSS开发者大会并没有视频资料,只能去看PPT啦。
Mathias Bynens:Things I Didn’t Know About CSS
!important的认知
// html
<div class="foo">
Lorem
<span class="bar">ipsum</span>
dolor sit amet...
</div>
// css
.foo .bar {
color: red;
}
.bar {
color: green;
}
效果如:
这里应该十分清楚,因为.bar的权值没有.foo .bar 的权值高,所以会选择使用了高权值对应的CSS样式,字体是红色。我们想要的是让ipsum的字体颜色变成绿色。
// bad 很多人可能都会直接写!import(但是不推荐这样去写)
.foo .bar {
color: red;
}
.bar {
color: green !important;
}
下面是一种非常推荐的写法(我猜大多数人都应该还不知道吧)
// good
.foo .bar {
color: red;
}
.bar.bar.bar.bar.bar.bar { // 备注: 个数大于两个,而且中间不能有任何间隙
color: green;
}
Attribute values
<a href="foo">…</a>
<style>
a[href="foo"] {
background: hotpink;
}
</style>
没有引号的属性值
<a href=foo>…</a>
<style>
a[href=foo] {
background: hotpink;
}
</style>
当如下的情况是无法选择到的
<a href=foo|bar>…</a> // 没有背景色
<style>
// 错误写法
a[href=foo|bar] {
background: hotpink;
}
</style>
正确写法如下:
<a href=foo|bar>…</a>
<style>
// 正确写法
a[href="foo|bar"] {
background: hotpink;
}
</style>
Valid HTML
// 虽然一下的写法是正确的合法的,但是永远不要这么写
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<body>
大牛的英文PPT实在是读不下去了,后面越来越多的奇门异术,对css研究真的深。
大漠: CSS Grid Layout
现在大量网页设计基于网格布局。虽说人们通常注意不到它,但杂乱无章的布局时代确实已经过去了,现在是整齐结构化的天下。无论从理论、美学和整齐来说,这样的布局都很好平衡。网格结构是所有现代网站的基础,它总能给最终用户完美无瑕的设计。
现代web布局:
- Float
- inline-block
- display: table
- position
Frameworks
最佳web布局:
Flexbox 地址
- CSS Grid Layout css-grid
- Box Alignment css-align
CSS Grid Layout
网格容器和网格项目
<div class="container">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>
CSS网格如下
案例:
定义网格
<div class="cards">
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour1.jpg" alt="Bristol harbour">
</div>
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour2.jpg" alt="Bristol harbour">
</div>
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/coloured-balloon.jpg" alt="Bristol harbour">
</div>
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/champagne-balloons.jpg" alt="Bristol harbour">
</div>
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/funfair-balloons.jpg" alt="Bristol harbour">
</div>
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/swatch.jpg" alt="Bristol harbour">
</div>
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/minion.jpg" alt="Bristol harbour">
</div>
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/where-is-the-basket.jpg" alt="Bristol harbour">
</div>
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/pink-balloon.jpg" alt="Bristol harbour">
</div>
</div>
css
// 九宫格
.cards {
display: grid;
/* grid-template-columns: 33.33% 33.33% 33.33%; */
/* grid-template-columns: 1fr 1fr 1fr; */
/* grid-template-columns: 500px 1fr 2fr; */
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 200px 200px 200px;
grid-gap: 20px;
}
.cards img {
object-fit: cover;
width: 100%;
height: 200px;
}
grid有很多种意想不到的布局,这里只是最简单的几个属性值。
相关资料:
SVG知识
SVG引入页面方式
<!-- 当图片引用 -->
<img src="../img/a.svg">
<!-- 内联 动画的最主要实现方法 -->
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 960 200">
<path class="st0 js_svg_path" d="M923,107.3c-11.5,41.5-51.2,38.8-66.5,29.5C829,120,836.9,77.9,810,63.3 c-21.5-11.6-59-5-67.5,33.5"></path>
</svg>
<!-- 当背景引用 -->
.svg{
background-image:url(../img/a.svg);
}
废话: 大部分时间在切一张又一张的设计图,写代码发现写了5000行代码,优化了又优化,发现还不如一张背景图大,网页中70%的流量是被切图占据了。曾经在IE6时代,我们使用png8来实现透明底色,现在换成了png24颜色变成了256的三次方。使用了二倍图三倍图来适应分辨率越来越高的屏幕。iconfont一度及其流行,但是毕竟我们的世界没办法只有单一色彩。期待的是: 色彩好,质量高,尺寸小,高动效。刚好SVG可以任何缩放,只有png大小的1/5,相比较png的缺点: 就是实时渲染耗时。
//
.svg{
background-image: url(svg.svg);
}
// 3X图
.png{
width: 40px;
height: 40px;
background-image: url(png.png);
@media query(min-device-pixel-ratio: 3){
background-image: url(png@3x.png);
background-size: 40px 40px;
}
}
.svg{
width: 40px;
height: 40px;
background-image:url(svg.svg);
}
3
// 减少请求,
.svg{
width: 40px;
height: 40px;
background-image: url(data:image/svg+xml;
base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy
53My5vcmcvMjAwMC9zdmciIHdpZHRoP
SIyIiBoZWlnaHQ9IjQ1OCIgdmlld0JveD0iM
CAwIDIgNDU4Ij4gIDxwb2x5bGluZSBmaWxs
PSJub25lIiBzdHJva2U9IiM5Nzk3OTciIHBvaW5
0cz0iMS4zNDQgLjQ2OSAxLjM0NCA1OS43ODEgMS4
zNDQgMjYxLjQzOCAxLjM0NCAzNzQuMTI1IDEuMzQ0IDQ
wOS42ODggMS4zNDQgNDI3LjUgMS4zNDQgNDUxLjI
xOSAxLjM0NCA0NTcuMTU2Ii8+PC9zdmc+);
}
小鷄SVG
<!-- 小鷄svg -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="bird" width="100" viewBox="0 0 64.3 72.2">
<path class="wing" d="M41.6,37.6c-0.5-0.1-1.1,0.2-1.2,0.8c-0.1,0.5,0.2,1.1,0.8,1.2c1.3,0.3,2.5,2.2,2.9,4.3
c0.2,0.9-0.3,2.3-1.1,3.4c-0.9,1.1-2,1.9-2.9,2c-1.3,0.1-2.3-2.5-2.6-4c0-0.1,0-0.2-0.1-0.3c-0.1-0.5-0.7-0.9-1.2-0.8
c-0.5,0.1-0.9,0.6-0.8,1.2c0,0.1,0,0.1,0.1,0.3c0.2,1.4-0.2,3-1.2,4.3c-1,1.4-2.5,2.3-3.9,2.4c-0.6,0.1-1-0.1-1.4-0.4
c-0.9-0.9-1-2.9-0.9-3.7c0-0.5-0.3-0.9-0.8-1c-0.5-0.1-1,0.2-1.1,0.6c0,0-1.5,4.1-4.4,4.9c-1,0.3-1.4-0.1-1.6-0.2
c-1-0.8-1.1-3.3-1.1-4.1c0-1.4,1.8-2.6,2.6-3c0.5-0.3,0.7-0.9,0.4-1.3c-0.3-0.5-0.9-0.7-1.3-0.4c-0.4,0.2-3.7,2-3.7,4.9
c0.1,2,0.3,4.4,1.9,5.6c0.6,0.4,1.3,0.7,2.1,0.7c0.4,0,0.8-0.1,1.2-0.2c1.9-0.5,3.3-1.9,4.3-3.2c0.2,0.7,0.6,1.4,1.1,1.9
c0.8,0.7,1.8,1.1,2.9,1c2-0.2,4-1.4,5.4-3.2c0.4-0.6,0.8-1.2,1-1.8c0.8,1.1,1.8,2,3.3,1.9c1.5-0.2,3.1-1.2,4.3-2.8
c1.2-1.6,1.8-3.4,1.5-4.9C45.5,40.5,43.7,38,41.6,37.6z" />
<path class="eye" d="M40,27.5L40,27.5c0.2,0,0.5,0,0.7-0.1c1-0.2,2-0.9,2.5-1.9c0.4-0.8,0.5-1.7,0.3-2.4
c-0.6-1.4-3.1-1.9-4.3-1.9c-0.4,0-0.7,0-1,0.1c-0.2,0-0.3,0.1-0.4,0.2c-0.6,0.6-1.4,1.9-0.7,3.5C37.6,26.2,38.2,27.5,40,27.5z
M39,23.2c0,0,0.1,0,0.2,0c1,0,2.2,0.4,2.4,0.6c0,0.1,0,0.4-0.2,0.7c-0.1,0.2-0.5,0.7-1.1,0.8c-0.1,0-0.2,0-0.3,0h0
c-0.4,0-0.6-0.2-1.1-1.4C38.7,23.8,38.9,23.5,39,23.2z" />
<path d="M64.3,29.5c-0.3-1-1.6-1.3-2-1.3l-4.5-0.8c4.8-2.6,4.8-3.7,4.8-4.1c0-0.5-0.3-1-0.8-1.2
c-1.7-0.8-7.5-1.7-8.5-1.8c-1.8-3.5-5-6.4-9.4-8.9c0,0,0,0-0.1-0.1c-0.4-0.3-7.2-5.6-11.7-9.1C32.1,2.2,32,2.1,32,2.1
c-0.6-0.2-2.4-1-3.6-0.2c-0.5,0.3-0.8,0.9-0.8,1.5c-3.6-2.7-5.9-3.8-6.9-3.2c-0.3,0.1-0.9,0.5-0.8,1.6c0.2,2.6,2.6,5.9,4.4,7.7
c-0.2,0.1-0.4,0.1-0.6,0.2c-3.2,1.3-2.6,13.1-2.3,18.1l0.1,7.6c0,1.6-1.1,2.9-2.7,3.2c-1.5,0.2-3,0.3-4.6,0.3
c-0.8,0-1.7-0.1-2.7-0.1c0.6-3.8-0.6-8.2-2.4-9.1c-0.8-0.4-1.6-0.2-2.2,0.5c-0.6,0.7-0.9,1.8-1,3.3c-0.5-1.2-0.9-2.1-0.9-2.2
c-0.5-1.2-1.6-3.1-3-2.8c-1.3,0.2-1.7,1.9-1.8,3.4c-0.5,4.7,1.4,7.3,2.3,8.3c0,0,0,0,0,0c-0.1,0.4-3.3,9,1.7,14.9
c2.9,3.4,6.6,6.9,12.1,9v7.2c0,0.6,0.4,1,1,1s1-0.4,1-1v-6.5c2.5,0.7,5.3,1.1,8.6,1.2v4.1c0,0.6,0.4,1,1,1s1-0.4,1-1v-4.1
c12.5-0.4,20.3-6.7,23.4-12.7c2.2-4.1,3.4-10.9,3.6-17.8c2.4-0.6,4.9-1.9,7.5-3.8C64.1,30.9,64.5,30.2,64.3,29.5z M60.1,23.6
c-0.9,0.8-2.9,1.9-4.9,2.9c-0.1-0.6-0.2-1.1-0.3-1.6c-0.2-0.8-0.4-1.7-0.7-2.4C56.3,22.8,58.7,23.2,60.1,23.6z M31.1,3.9
c2.9,2.3,5.1,4,6.7,5.3C36.7,9,35.4,9,34.2,8.9c0,0,0,0,0,0c-2.3-2.1-4.4-4.5-4.6-5.3C29.9,3.5,30.5,3.7,31.1,3.9z M26.7,9
c-0.7-0.5-4.2-4.1-4.8-6.9c1.6,0.7,5.5,3.6,9.2,6.7C29.7,8.9,28.2,8.9,26.7,9C26.7,9,26.7,9,26.7,9z M8.3,31.5
c0.7,0.7,1.8,3.8,1.1,7.2c-0.6,0-1.1,0-1.7,0.1c0-0.2,0-0.4,0-0.6C7.6,34.5,7.8,32.3,8.3,31.5z M2.1,32.1c0.1-0.6,0.2-1,0.2-1.3
c0.3,0.3,0.6,0.9,0.8,1.3c0.6,1.4,2.2,5.2,2.6,6.9c-0.5,0.1-1,0.1-1.4,0.2c-0.1-0.1-0.1-0.2-0.2-0.2C4.1,39,1.6,37,2.1,32.1z
M50.4,52.3c-2.9,5.5-10.3,11.5-22.3,11.6l-0.6,0c-11.7,0-17.5-4.9-22-10.1c-3.7-4.3-2-10.7-1.5-12.4c1.3-0.4,3.7-0.6,6.9-0.6
c1.1,0,2.2,0,3.1,0.1c1.6,0.1,3.3,0,4.9-0.3c2.5-0.4,4.4-2.6,4.4-5.1l-0.1-7.7c-0.6-8-0.1-15.6,1-16.2c0.9-0.4,3.5-0.6,6.9-0.6
c4.2,0,7.7,0.3,8.2,0.6c0.1,0.1,0.4,0.2,0.8,0.4c2.8,1.2,11.2,5,12.7,13.5C54.9,35.6,53.2,47.1,50.4,52.3z M55.8,33.3
c0-1.4-0.1-2.9-0.2-4.3l6.2,1.1C59.7,31.7,57.7,32.7,55.8,33.3z" />
</svg>