CSS技巧【iOS页面滚动、使用transform启动GPU硬件加速、使用attr()抓取data-*、使用:valid和:invalid校验表单、使用pointer-events禁用事件触发】

使用overflow-scrolling支持弹性滚动

• 要点：iOS页面非body元素的滚动操作会非常卡(Android不会出现此情况)，通过overflow-scrolling:touch调用Safari原生滚动来支持弹性滚动，增加页面滚动的流畅度
• 场景：iOS页面滚动
• 兼容：iOS自带-webkit-overflow-scrolling

body {
    -webkit-overflow-scrolling: touch;
}
.elem {
    overflow: auto;
}

使用transform启动GPU硬件加速

• 要点：有时执行动画可能会导致页面卡顿，可在特定元素中使用硬件加速来避免这个问题
• 场景：动画元素(绝对定位、同级中超过6个以上使用动画)
• 兼容：transform

.elem {
    transform: translate3d(0, 0, 0); /* translateZ(0)亦可 */
}

使用attr()抓取data-*

• 要点：在标签上自定义属性data-*，通过attr()获取其内容赋值到content上
• 场景：提示框
• 兼容：data-*、attr()

  <div class="bruce flex-ct-y">
  	<a class="tooltips" href="https://www.baidu.com" data-msg="Hello World">提示框</a>
  	<a class="tooltips" href="https://www.baidu.com"></a>
  </div>
  <style lang="scss">
  .tooltips {
  	position: relative;
  	margin-top: 10px;
  	padding: 0 20px;
  	border-radius: 10px;
  	height: 40px;
  	background-color: $purple;
  	line-height: 40px;
  	color: #fff;
  	&::after {
  		position: absolute;
  		left: 0;
  		top: 0;
  		border-radius: 5px;
  		width: 100%;
  		height: 100%;
  		background-color: rgba(#000, .5);
  		opacity: 0;
  		text-align: center;
  		font-size: 12px;
  		content: attr(data-msg);
  		transition: all 300ms;
  	}
  	&:first-child {
  		margin-top: 0;
  	}
  	&:hover::after {
  		left: calc(100% + 20px);
  		opacity: 1;
  	}
  	&[href]:empty::before {
  		content: attr(href);
  	}
  	&[href]:empty:hover::after {
  		display: none;
  	}
  }
  </style>

   

 

 

使用:valid和:invalid校验表单

• 要点：<input>使用伪类:valid和:invalid配合pattern校验表单输入的内容
• 场景：表单校验
• 兼容：pattern、:valid、:invalid

  <div class="bruce flex-ct-x">
  	<form class="form-validation">
  		<div>
  			<label>名字</label>
  			<input type="text" placeholder="请输入你的名字(1到10个中文)" pattern="^[\u4e00-\u9fa5]{1,10}$" required>
  		</div>
  		<div>
  			<label>手机</label>
  			<input type="text" placeholder="请输入你的手机" pattern="^1[3456789]\d{9}$" required>
  		</div>
  		<div>
  			<label>简介</label>
  			<textarea required></textarea>
  		</div>
  	</form>
  </div>
  <style lang="scss">
  .form-validation {
  	width: 500px;
  	div {
  		margin-top: 10px;
  		&:first-child {
  			margin-top: 0;
  		}
  	}
  	label {
  		display: block;
  		padding-bottom: 5px;
  		font-weight: bold;
  		font-size: 16px;
  	}
  	input,
  	textarea {
  		display: block;
  		padding: 0 20px;
  		outline: none;
  		border: 1px solid #ccc;
  		width: 100%;
  		height: 40px;
  		caret-color: $blue;
  		transition: all 300ms;
  		&:valid {
  			border-color: $green;
  			box-shadow: inset 5px 0 0 $green;
  		}
  		&:invalid {
  			border-color: $red;
  			box-shadow: inset 5px 0 0 $red;
  		}
  	}
  	textarea {
  		height: 122px;
  		resize: none;
  		line-height: 30px;
  		font-size: 16px;
  	}
  }
  </style>
  

   

 

 

使用pointer-events禁用事件触发

• 要点：通过pointer-events:none禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等)，相当于<button>的disabled
• 场景：限时点击按钮(发送验证码倒计时)、事件冒泡禁用(多个元素重叠且自带事件、a标签跳转)
• 兼容：pointer-events

<div class="bruce flex-ct-x">
	<a class="disabled-trigger" href="https://www.baidu.com">点我</a>
</div>
<style lang="scss">
.disabled-trigger {
	padding: 0 20px;
	border-radius: 10px;
	height: 40px;
	background-color: $purple;
	pointer-events: none;
	line-height: 40px;
	color: #fff;
}
</style>