WEB前端优化--HTML/CSS优化

2024-02-06 13:17:28

web前端优化系列

优化1：能用HTML/CSS解决的问题就不要用JS

此系列文章是以《高效前端-Web高效编程与优化实践》一书进行整理、记录和扩展的。

优化1：能用HTML/CSS解决的问题就不要用JS

以几个案例来介绍

1.1 导航高亮

这个案例不是普通鼠标放上去高亮，而是根据展示的页面不同，高亮响应的元素。

正常态时
nav li { opacity:0.5 }

而在选中状态时，导航不透明读为1。
为了实验此目的，首先通过body给不同页面添加不同的类，用于标识不同页面。
li也要有class标识
这样，如果当前页面是home,则body.home nav li.home这条规则生效，home导航高亮
如果用JS控制，则在脚本加载好之前，当前页面是不会高亮的，而当脚本加载好之后会突然高亮。

<!-- home.html-->
<body class = "home"></body>
<!-- buy.html-->
<body class = "buy"></body>

<li class="home">home</li>
<li class="buy">buy</li>

body.home nav li.home,
body.buy nav li.buy{
	opacity:1
}
hover的高亮
nav li:hover{
	opacity:1
}

1.2鼠标悬浮显示

引言：
鼠标悬浮的场景的实现，一般要把隐藏的对象如子菜单、信息框作为hover目标的子元素或者相邻元素，才方便CSS控制

代码1-2-1 菜单menu紧挨着user：

<li class="user">用户</li>
<li class="menu">
  <ul>
    <li>账户设置</li>
    <li>登出</li>
  </ul>
</li>

<!-- style代码 -->
<style>
/*正常下隐藏*/
.menu{  
	display:none;
}

/*
当导航Hover时结合相邻选择器，把它显示出来
注意,这里用的是相邻选择器。menu的位置可以用absolute定位
*/
.user:hover + .menu {
	display:list-item
}
.menu {
	display:list-item
}
</style>

问题: menu和导航需要挨在一起，若中间有空隙，则鼠标移开导航栏时，菜单也会消失。

但这里可以在Menu上再画一个透明的区域，可以用before/after伪类用absolute定位实现

ul.menu:before{
	content:"",
	position:absolute;
	left:0;
	top:-20px;
	width:100%;
	height:20px;
}

问题: 如果既写了CSS的hover，又监听了mouse事件，用mouse控制显示隐藏，双重效果会有什么情况发声？

在mouse事件里面hover的时候，添加了一个display:block的style，会覆盖掉CSS的设置
即，只要hover一次，CSS的代码就不管用了，因为内联样式的优先级会高于外联的

1.3 自定义radio/checkbox的样式

这里的主要逻辑是： 借助了CSS3提供的一个伪类：checked，只要radio/checkbox是选中状态，这个伪类就会生效，因此可以利用选中和非选中这两种状态，去切换不同的样式。代码清单如下

1-3 实现自定义单选、多选按钮样式

<style>
input[type=checkbox]{
	display:none;
}
/*未选中checkbox的样式*/
.checkbox {}

/*选中时，样式*/
input[type=checkbox]:checked + .checkbox {}
</style>

<!--写在label里面是为了能够在单击span的时候改变checkbox的状态。最后再改一下选中态的样式即可-->
<label>
	<input type="checkbox">
	<span class="checkbox"></span>
</label>

1.4需要根据个数显示不同样式

例如有1~3个item显示在同一行，但item个数不一定，这时可以用CSS3轻松解决

1-4 借助nth-last-child实现个数区分

<style>
	li {
		width:100%;
	}

	li:first-child:nth-last-child(2),
	li:first-child:nth-last-child(2) ~ li {
		width:50%;
	}

	li:first-child:nth-last-child(3),
	li:first-child:nth-last-child(3) ~ li {
		width:33%;
	}
</style>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

借助一个nth-last-of-type有时非常好用，特别是需要实现前向选择器。
如果有两个terms，想要隐藏第二个，只显示第二个，可以这样做

<style> .terms-box + .terms-box {display:none}</style>
<div class="terms-box"> </div>
<div class="terms-box"> </div>

反过来的话可以这样实现
当它是第一个元素，兵器它是倒数第二个的时候就隐藏。这样就实现了有两个term的时候隐藏第一个，只有一个的时候不隐藏

.terms-box:nth-of-type(1):nth-last-of-type(2) {
	display:none;
}

其他

当要实现一个hover的时候显示提示信息，如果用title属性觉得效果太弱，但是又不想用JS写，这里可以用CSS3的attr属性实现，将想要展示的提示文案放单一个属性里面

<p> hello,<span data-title="Fronted Development">FED</span></p>

span[data-tilte] {
	position:relative;
}

span[data-title]:hover:before{
	content:attr(data-title);
	position:absolute;
	top:-50%;
	left:50%;
	transform:translateX(-50%);
	white-space:nowrap;
}

码农公寓