那些熟悉又陌生的CSS属性

李振文
1,038 阅读4分钟

这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

CSS3 -webkit-font-smoothing 属性

对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天，抗锯齿渲染使用也越来越多。

font-smoothing是非标准的CSS定义。它被列入标准规范的草案中，后由于某些原因从web标准中被移除了。

但是，我们可以用以下两种定义进行抗锯齿渲染 CSS3里面加入了一个“-webkit-font-smoothing”属性。

加上之后就顿时感觉页面小清晰了。 淘宝也在用哦！

body{ 
-webkit-font-smoothing: antialiased;
} 
body{
-moz-osx-font-smoothing: grayscale;/*firefox*/
}

antialiased 抗锯齿

image.png

none对低像素的文本比较好 

image.png

subpixel-antialiased默认值效果

image.png

这个属性也是更清晰的作用，特别是图标字体流行的今天。

CSS3 overflow-style 属性

设置溢出元素的首选滚动方法：

div
{
overflow:auto;
overflow-style:marquee,panner;
}
属性说明
scrollbar为溢出元素添加滚动条。
panner
move用户能够直接移动元素的内容。通常，用户能够用鼠标拖动内容。
marquee内容自主移动，不需任何用户代理对其控制。

CSS3 appearance 属性

使 div 元素看上去像一个按钮：

div
{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari 和 Chrome */
}

cursor:not-allowed 的使用

鼠标样式 not-allowed，是一个红色的圈加一个斜杠，表示禁止的意思，似乎IE，chrome firefox 都能够正常显示，很好用

 

CSS里的pointer-events属性

现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events的风格更像JavaScript，它能够：

  • 阻止用户的点击动作产生任何效果
  • 阻止缺省鼠标指针的显示
  • 阻止CSS里的hover和active状态的变化触发事件
  • 阻止JavaScript点击动作触发的事件

-ms-touch-action

在IE10下给元素增加触控效果 

属性说明
auto 默认值，允许浏览器给元素添加touch行为
none不允许默认的touch行为
pan-x允许水平轴触摸驱动的平移
pan-y允许垂直轴触摸驱动的平移
pinch-zoom允许拖拽缩放
manipulation允许触摸驱动的平移和拖拽缩放
double-tap-zoom允许整个页面双击缩放指定元素
inherit继承父元素的值

CSS outline 属性

设置 4 个边框的样式：

p
  {
  outline:#00FF00 dotted thick;
  }

CSS3 outline-offset 属性

规定边框边缘之外 15 像素处的轮廓：

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

-webkit-overflow-scrolling : touch;

现在很多for Mobile的H5网页内都有快速滚动和回弹的效果，看上去和原生app的效率都有得一拼。

可以用手指滑动中间的蓝色区域，会发现回弹效果以及滚动得很快：

如果把-webkit-overflow-scrolling那行注释掉，就会发现滚动得很慢。

设置滚动条样式

/*滚动条整体样式*/
::webkit-scrollbar:{
	width:12px;
}
/*滑轨背景颜色*/
::webkit-scrollbar-track{
	background: #F0F0F5;
    border-radius:10px;
}
/*滑块颜色*/
::webkit-scrollbar-thumb{
 	border-radius:10px;
    background:#D5D8DF;
}

::-webkit-scrollbar （滚动条整体部分，可以设置宽度）
::-webkit-scrollbar-thumb （滚动的滑块）
::-webkit-scrollbar-track （外层轨道）
::-webkit-scrollbar-track-piece （内层滚动槽）
::-webkit-scrollbar-button （滚动条两端的按钮）
::-webkit-scrollbar-corner （横轴和纵轴相交的区域）
::-webkit-resizer （定义右下角拖动块的样式 ）

flex和grid布局: place-content/place-item

<div class="content">
	<div class="item"></div>
</div>
<style>
/*
 	place-content是justify-content和align-content的简写属性
 	place-items是justify-items和align-items的简写属性
*/
/*第一种flex居中*/
.content{
	display:flex;
	/*
	align-items: center;
    justify-content: center;
    */
  	place-content: center;
    place-items: center;
}
/*第二种flex居中*/
.content{
	display:flex;
}
.item{
	margin:auto
}
/*第三种grid居中:place-content和place-items都可以，任选其一*/
.content{
	display:grid;
	/*place-content: center;*/ 
    place-items: center;
}
</style>

现代伪类

:is()和:where()：在多个不同的div中给同一标签设置相同的属性可简化

<!--
:is(section, article, aside, nav) h1 {
  font-size: 25px;
}
相当于
section h1, article h1, aside h1, nav h1 {
  font-size: 25px;
}
-->
<body>
	<header  class="header">
	    <p class="p"></p>
	</header>
	<main class="main">
	    <p class="p">100周年</p>
	</main>
</body>
<style>
    .p {
        color: blue;
        font-size: 20px;
    }
    :where(.header, .main) .p {
        color: red;
    }
    /*上面两个权重一样*/
    :is(.header, .main) .p {
        color: purple;
    }
    /* :where和:is的作用和如下代码一样*/
    .header .p,
    .main .p {
        color: green;
    }
    /*上面两个权重一样*/
    /*总结:is()比:where()的权重高*/
</style>

:not()和:has() :not()：在卡片排序时希望之间有间隔，可设第一张没有margin-top或最后一张没有margin-bottom :has()：子元素匹配父元素（目前浏览器还不支持）

<body>
	<div class="list">
	    <div class="block">
	    	 <h1>Title</h1>
		</div>
	    <div class="block"></div>
	</div>
</body>
<style>
    .block{
        width: 100px;
        height: 50px;
        background: #1A6CE0;
    }
    .block:not(:last-child){
        margin-bottom: 20px;
    }
    .block:has(h1) {
        border-color: red;
    }
</style>

:empty(),:blank()：当数据为空时，避免出现之前的正常的样式

<div class="grid">
    <div>
        <p>Has error message</p>
        <div class="error">Whoops! Something went wrong!</div>
    </div>

    <div>
        <p>No errors</p>
        <div class="error"></div>
    </div>
</div>
<style>
    .error {
        background-color: pink;
        padding: 0.5em 0.75em;
    }
    .error:empty {
        padding: 0;/*使默认的框消失*/
    }
</style>

实现文字可以竖着呈现的

writing-mode: horizontal-tb（默认）vertical-rl（从右向左）/vertical-lr（从左向右）;

不可选中文本复制粘贴

user-select: none（不可选中文本，不可粘贴复制）/all（可选择整个元素）
avatar
文章
阅读
粉丝