CSS 一些小技巧 一

左右布局，左边不动，右边随动

<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>
//css
<style>
.main {
    display: flex;
    min-width: 1200px;
    height: 100vh;
}
.left {
    flex-basis: 250px;
    margin-right: 10px;
}
.right {
    flex-grow: 1;
}
</style>

文本超出省略

//单行
{
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
//多行
{
    width: 200px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

图片列表优化

<ul>
  <li><img src="xxx.jpg" /><p>图片说明</p></li>
  <li><img src="xxx.jpg" /><p>图片说明</p></li>
  <li><img src="xxx.jpg" /><p>图片说明</p></li>
</ul>
<style>
  ul li img {
    width: 150px;
    height: 100px;
    object-fit: cover;    //裁剪图片
    object-position: 50% 50%;    //裁决位置，默认50% 50%
  }
</style>

响应式图片

利用多倍图去适配不同 dpr 的屏幕

<img 
        src = "photo.png" 
        sizes = “(min-width: 600px) 600px, 300px" 
        srcset = “photo@1x.png 300w,
                       photo@2x.png 600w,
                       photo@3x.png 1200w,
>

图片丢失时处理

图片加载失败时，触发 <img> 元素的 onerror 事件，给该 <img> 元素新增一个样式类

<img src="test.png" alt="图片描述" onerror="this.classList.add('error');">
<style>
  img.error {
    position: relative;
    display: inline-block;
  }
  img.error::before {
    content: "";
    /** 定位代码 **/
    ……
    background: url(error-default.png);
  }
  img.error::after {
    content: attr(alt);
    /** 定位代码 **/
    ……
  }
</style>

容器滚动优化

//简单的：scroll-behavior
{
  scroll-behavior: smooth    //给可滚动容器添加即可
}
//复杂点的：scroll-snap-type
.parent{
    scroll-snap-type: x mandatory;
    overflow: auto;
}
.child{
    scroll-snap-align: center;
}

快速选择优化

操作系统或者浏览器中，快速单击两次，可以选中单个单词，快速单击三次，可以选中一整行内容。但是偶尔不好使，会被分割。这时，对需要一次选中的内容进行.select-all包裹即可

.select-all {
    user-select: all
}
//还可以使用 ::selection伪类改写样式

按钮点击过快，选中按钮文字优化

{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

默认字体借鉴

天猫：
font-family: "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
Github：
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;

:focus优化

<button>Test 1</button>
<button>Test 2</button>
<button>Test 3</button>

button:active {
  background: #eee;
}
button:focus {
  outline: 2px solid red;
}
//使用鼠标点击，不会触发 :foucs，只有当键盘操作聚焦元素，使用 Tab 切换焦点时，outline: 2px solid red 才会生效
button:focus:not(:focus-visible) {    
  outline: none;
}