关于前端:CSS-技术沉淀

基础理论

元素的显示与暗藏

依据不同的需要抉择暗藏计划

如果心愿元素不可见，同时不占据空间，辅助设施无法访问，同时不渲染，应用 script 标签暗藏

<script type="text/html">

      <img src="./img/55.png" />

</script>

获取数据的办法应用 document.querySelector('script').innerHTML

如果心愿元素不可见，同时不占据空间，辅助设施无法访问，但资源有加载，DOM 可拜访，则能够间接应用 display:none 暗藏

.dn{display:none;}

如果心愿元素不可见，同时不占据空间，辅助设施无法访问，但显隐的时候能够有 transition 淡入淡出成果

.hidden {

    position: absolute;

    visibility: hidden;

}

如果心愿元素不可见，不能点击，辅助设施无法访问，但占据空间保留则能够应用 visibility:hidden 暗藏

.vh {visibility: hidden;}

如果心愿元素不可见，不能点击，不占据空间，但键盘可拜访，则能够应用 clip 裁剪暗藏

.clip {

    position: absolute;

    clip: rect(0 0 0 0);

}

案例：1. 请帖生成封面。2. 键盘应用快捷键但不显示按钮（应用 accesskey）

如果心愿元素不可见，不能点击，但占据空间，且键盘可拜访，则能够应用 relative 暗藏。如果条件容许，也就是上一层层叠上下文 之间 设置了背景色，则能够应用更敌对的 z -index 负值暗藏

.out {

    position: relative;

    left:-999em;

}

.lower {

    position: relative;

    z-index: -1;

}

如果心愿元素不可见，但能够点击，而且不占据空间，则能够应用透明度

.opacity {

    position: absolute;

    opacity: 0;

}

如果心愿元素不可见，但地位保留，仍然能够点能够选，则间接让透明度为 0

.opacity{opacity: 0;}

如果心愿元素在显示时有一个 transition 动画，能够应用 max-height 进行暗藏

.hidden {

    max-height: 0;

    overflow: hidden;

}

display 与元素的显隐

根底理解：无奈点击，无奈应用屏幕阅读器等辅助设施拜访，占据空间隐没

深层理解：img 标签上或父元素设置 display:none 都会加载资源。然而 background-image 申请的资源在该标签上或父元素设置 display：none 都不会加载资源（safari 和 chrome 验证）, 在计数中设置了 display：none 的元素不被计入。会对 IntersectionObserver 造成影响

visibility 与元素的显隐

根底理解：无奈点击，无奈应用屏幕阅读器等辅助设施拜访，占据空间不隐没

深层理解：visibility 具备继承性，父级设置 visibility:hidden 后子级能够设置 visibility:visible 显示子元素。设置了 visibility:hidden 的元素会加载 img 资源也会加载 background-image 资源。同时也会被纳入计数。visibility 属性被纳入 transition 的范畴内，因而可利用该属性展现元素从暗藏到显示的过渡成果。然而该属性不会对 IntersectionObserver 造成影响，也就是说如果弹窗是从暗藏到显示应用了该属性的话，对它进行埋点是有效的。

文本的换行

word-break

当行尾放不下一个单词时，决定单词外部该怎么摆放(决定一直行单词的长度)

nomal：默认值，默认的换行规定（CJK 文本断行，英文单词一直行，空格断行）

break-all：对于 non-CJK（中日韩）文本，可在任意中央断行

keep-all：CJK 文本一直行，non-CJK 文本表现形式如同 nomal

word-wrap

是用来阐明当一个不能被离开的字符串太长而不能填充其包裹盒时，为避免其溢出，浏览器是否容许这样的单词断词（没有换行点的单词在句尾放不下时，决定单词是否断词）

nomal：默认值，行只能在失常的单词断点处中断。（例如两个单词之间的空格）。

break-word：示意如果行内没有多余的中央包容该单词到结尾，则那些失常的不能被宰割的单词会被强制宰割换行。

white-space

如何解决元素中的空白

nomal：默认值，间断的空白符被合并，换行符被当做空白符解决

nowrap：间断的空白符被合并，文本内的换行符有效 (
无效)

pre：间断的空白符会被保留，在遇到换行符或者
元素时才会换行

pre-wrap：间断的空白符会被保留，在遇到换行符或者
元素，或者为了填充行框盒子（line-box）时才会换行

pre-line：间断的空白符会被合并，在遇到换行符或者
元素，或者为了填充行框盒子（line-box）时才会换行

line-break

中文标点的换行规定，比方 。 是避首标点，《是避尾标点，通过此属性管制 CJK 文本标点的换行规定

auto：应用默认的换行规定。

loose：应用限制性最小的换行规定分隔文本。通常用于短行，如在报纸上。

normal：应用最一般的换行规定。

strict: 应用最严格的换行规定。

anywhere：任意地位都能够作为换行点，包含任意的标点。

<wbr>

这是 html 元素，宽度不够，在我这里换行；宽度足够，还是一行显示

实现原理

wbr::after{content: '\00200B'}

光标属性 cursor

https://developer.mozilla.org…

flex 子项最终尺寸计算规定

一个 flex 子项的最终尺寸是根底尺寸（或内容尺寸），弹性增长或膨胀，最大最小尺寸独特作用的后果

最终尺寸计算的优先级是：

最大最小尺寸限度 > 弹性增长或膨胀 > 根底尺寸

• 根底尺寸有 flex-basis 属性或 width 属性，以及 box-sizing 盒模型独特决定
• 内容尺寸指最大内容宽度，当没有设置根底尺寸时会顶替根底尺寸的角色
• 弹性增长指的是 flex-grow 属性，弹性膨胀指的是 flex-shrink 属性
• 最大尺寸次要受 max-width 属性显示；最小尺寸受最小内容宽度，width 属性和 min-width 属性独特影响

flex 容器:
flex-wrap:nowrap;
flex-direction:row;
justify-content:flex-start;
align-items:stretch; 为默认值

flex: 0 1 auto 这是 flex 子项的默认值，代表 flex-grow:0，flex-shrink:1，flex-basis: auto

最小尺寸计算规定

• 如果 min-width 属性值不是 auto，则元素的最小尺寸就是就是 min-width 的属性值，此时 width 属性无奈影响最小尺寸，哪怕 width 的属性值大于 min-width 的属性值。
• 比拟 width 的属性的计算值和最小内容宽度的大小，较小的值就是元素的最小尺寸。
• 如果 width 的属性值和 min-width 的属性值均为 auto，则元素的最小尺寸就是最小内容宽度。
• 如果 flex 子项设置了 overflow:hidden，且最小尺寸是由是否最小内容宽度决定的，则最小尺寸有效。

根底尺寸计算规定

• 如果 flex-basis 属性和 width 属性同时设置了具体的数值，width 属性值会被疏忽，优先应用 flex-basis 作为根底尺寸。
• 如果 flex-basis 的属性值是初始值 auto，则会应用 width 属性设置的长度值作为根底尺寸。
• 如果 flex-basis 和 width 的属性值都是 auto，则会应用 flex 子项的最大内容宽度作为根底尺寸

弹性增长或膨胀何时作用

• 如果容器尺寸足够并且子元素的属性值蕴含 flex-grow 不为 0 则启用弹性增长规定
• 容器尺寸足够：在容器 flex-wrap:wrap 状态下，n 个子元素的根底尺寸相加宽度少于容器宽度，n+ 1 个子元素的根底尺寸相加大于容器，且这 n 个子元素中具备 flex-grow 不为 0 的元素，则这 n 个子元素具备弹性增长的条件。在容器 flex-wrap：nowrap 状态下，所有子元素根底尺寸相加宽度少于容器宽度。
• 如果容器尺寸有余并且子元素的属性值蕴含 flex-shrink 不为 0 则启用弹性膨胀规定
• 容器尺寸有余：在容器 flex-wrap:wrap 状态下，子元素的根底尺寸大于容器宽度，且子元素的 flow-shrink 不为 0，则这个子元素具备弹性膨胀条件。在容器 flex-wrap:nowrap 状态下，所有子元素的根底宽度少于容器宽度，且至多有一个子元素的 flex-shrink 不为 0，则 flex-shrink不为 0 的子元素具备弹性膨胀条件。
• 弹性增长，增长的局部是可调配空间，计算规定是容器宽度 - 元素根底尺寸
• 弹性膨胀，膨胀的局部是有 flex-shrink 不为 0 元素的宽度，最多能够膨胀至元素最小尺寸。

最终尺寸计算规定 - 总结

• 如果没有弹性膨胀或增长，则元素在最大尺寸和最小尺寸范畴内应用根底尺寸
• 如果元素可能弹性增长或膨胀，在容器宽度足够的状况下应用弹性增长规定，在容器宽度有余的状况下应用弹性膨胀规定，同一行只可能利用一种规定

选择器

选择器优先值计算

雷同计算值下遵循青出于蓝准则，前面的优先级更高

命名灵感

从 HTML 标签寻找灵感

.cs-module-header {}

.cs-module-body {}

.cs-module-aside {}

.cs-module-main {}

.cs-module-nav {}

.cs-module-section {}

.cs-module-content {}

.cs-module-summary {}

.cs-module-detail {} // 详情

.cd-module-option {}

.cs-module-img {}

.cs-module-footer {}

.cs-module-ui {}

.cs-module-li {} // 列表子项

.cs-module-a {} // 链接

.cs-module-g {} // 组

.cs-module-desc {} // 形容

.cs-module-x {} // 容器盒子

从 HTML 特定属性值中寻找灵感

.cs-radio {}

.cs-checkbox {}

.cs-range {}

.cs-tspan-email {}

.cs-tspan-number {}

.cs-tspan-color {}

.cs-tspan-tel {}

.cs-tspan-date {}

.cs-tspan-url {}

.cs-tspan-time {}

.cs-tspan-file {}

从无障碍拜访的 role 属性值中寻找灵感

.cs-grid {}

.cs-grid-cell {}

.cs-log {}

.cs-menu {}

.cs-menu-bar {}

.cs-menu-item {}

.cs-region {} // 不能被其余 role 形容，然而很重要的局部

.cs-banner {} // 横幅广告

.cs-slider {}

.cs-tab {}

.cs-tab-list {}

.cs-tab-pannel {}

.cs-tooltip {}

.cs-tree {}

从 CSS 伪类和 HTML 布尔属性中寻找灵感

.active {}

.disabled {}

.selected {}

.checked {}

.invalid {} // 出错状态

体验优化

图片加载失败体验优化

<img src="xxx.png" alt="图片封面" onerror="this.classList.add('error');">
img.error {

  display: inline-block;

  transform: scale(1);

  content: '';

  color: transparent;

}

/* 替换图片 */

img.error::before {

  content: '';

  position: absolute;

  left: 0; top: 0;

  width: 100%; height: 100%;

  background: #f5f5f5 url(break.svg) no-repeat center / 50% 50%;

}

/* alt 提醒 */

img.error::after {content: attr(alt);

  position: absolute;

  left: 0; bottom: 0;

  width: 100%;

  line-height: 2;

  background-color: rgba(0,0,0,.5);

  color: white;

  font-size: 12px;

  text-align: center;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

点击体验优化

挪动端按钮可点击范畴放大

.mobi-btn {border: 8px solid transparent;}

键盘体验优化

可拜访性 - 焦点管制

tabindex = “-1”

元素能够被鼠标或 JS focus 但不能被键盘 focus

tabindex = “0”

最初一个被 focus 的元素

tabindex >= “1”

越小优先级越高

若进入网页没有点击则依照 1，2，…，0

若点击则定位到点击的主体，按下 tab 寻找到第一个有 focus 的元素，再次按下依据该元素的 tabindex 寻找下一个焦点

:focus-visible

让咱们晓得元素的聚焦行为是键盘触发还是鼠标触发

// 鼠标触发

:focus:not(:focus-visible) {}

// 键盘触发

:focus:focus-visible {}

以后取得焦点的元素

document.activeElement

检测文档是否获取了焦点

document.hasFocus()

滚动体验优化

overscroll-behavior

overscroll-behavior: [contain | none | auto]{1,2} 当只有一个值时代表程度垂直方向都是该值，有两个值时第一个代表程度方向第二个代表垂直方向

auto：滚动到边缘后持续滚动内部的可滚动容器

contain：默认的滚动溢出行为只会体现在以后元素的外部，不会对相邻的滚动区域进行滚动。

none：相邻的滚动区域不会产生滚动，并且会阻止默认的滚动溢出行为。

scroll-behavior

在可滚动的容器上应用，罕用于达到顶部

auto：默认值

smooth：平滑滚动, 与 ant-design 的 scrollToFirstError 搭配成果佳

overflow-anchor

auto: 默认值，该行为会调整地位以最大水平的缩小内容偏移（例如上方图片的忽然加载会无感知）

none：退出浏览器滚动锚定行为

暗藏滚动条，同时元素可滚动

.scroll-none {scrollbar-width: none;}

// chrome 公有办法

.scroll-none::-webkit-scrollbar {width:0; height:0;}

跳转体验优化

PC 端跳转同一个地址不创立新的 tab 页

<a href="https://www.baidu.com" target="bd"> 点击进入百度 </a>

target 雷同时会指向同一个 tab 页

输出体验优化

cater-color 属性扭转插入光标色彩

cater-color: red

挪动端唤起数字键盘

验证码：<input inputmode="numeric">

拉伸行为体验优化

rezize

none：默认值，没有拉伸成果，能够用来种植 textarea 元素默认的拉伸行为

both：既能够程度方向拉伸，也能够垂直方向拉伸

horizontal：仅能够程度方向上拉伸

vertical：仅能够垂直方向上拉伸

失效条件

块级元素且 overflow 的属性值不是 visible

限度拉伸范畴

应用 max-width，max-height，min-width，min-height 属性

抉择行为体验优化

user-select

text：默认值，文字和图片能够被选中

none：禁止图文被选中

all：被低估的一个属性值，设置了该属性的图文内容都会被选中

::selection

被选中时伪类，全局设置时可设置品牌色彩为背景，适合色彩为字体色彩

::selection {

    color: hunlijiColor;

    background: hunlijuBackgroundColor;

}

刷新体验优化

刷新时滚动条回到顶部

if (history.scrollRestoration) {history.scrollRestoration = 'manual';}

打印行为体验优化

管制打印款式的媒体查问

@media print {

    header{display:none;}

}

是否进行准确打印

color-adjust

economy：默认值，可能会将背景不打印

exact：准确打印

table{

    -webkit-print-color-adjust: exact;

    color-adjust: exact;

}

使该元素另起一页打印

break-before:page

性能优化

will-change

will-change 的作用有两个，一个是创立合成层, 一个在真正的行为触发之前通知浏览器：“我要变动了，你要做好筹备”

如何正确的应用

will-change 不应该被设置在默认状态中且须要及时销毁，现实中的利用场景应该是 hover 状态下

// good

.will-change-parent:hover .will-change{will-change:transform;}

.will-change {transition: transform 0.3s;}

.will-change:hover {transform：scale(1.5)

}

// bad

.will-change {transition: transform 0.3s;}

.will-change:hover{

    will-change: transform;

    transform: scale(1.5);

}

如果点击按钮，某个元素执行动画，先执行的是 mousedown 事件，之后执行的是 click 事件

dom.onmousedown = function() {target.style.willChange = 'transform'}

dom.onclick = function() {// target 元素执行动画}

target.onanimationend = function() {

    // 动画完结，用回调函数移除 will-change 属性

    this.style.willChange = 'auto'

}

创立合成层

无奈复制加载中的内容

• 合成层的位图会交由 GPU 合成，比 CPU 解决要快得多
• 当须要 repaint 时，只须要 repaint 自身，不会影响其余层
• 元素晋升为合成层后，transform 和 opacity 不会触发 repaint，如果不是合成层则依旧会触发 repaint

防止隐式创立合成层及优化

合成层比拟占用内存，如果一个合成层的宽高为 100px 100px，则合成层占用内存的计算形式为 100100*3 = 30000Byte = 30KB

当元素交叠，处在下方的元素成为了合成层，上方的元素隐式变成了合成层

• 能够将必须合成层的层级晋升至较高层级，则其余交叠层级没有该层级高就不会隐式创立合成层
• 动画应用 transform 实现，一方面如果不波及到 translateZ 则不会创立合成层，一方面生成层叠上下文不会影响到别的层叠上下文渲染
• 通过缩小宽高再进行 scale 放大的形式能够无效缩小合成层应用的内存

SEO

H1 标签一个页面只能用一个

同一网页通过多个网址拜访指定标准网址

<link rel="canonical" href="http://www.hunliji.com/merchant/detail_1378">

关键词

<meta data-hid="keywords" name="keywords" content="关键词 1, 关键词 2">

详细描述

<meta data-hid="description" name="description" content="形容内容，字数在 0 -200 字为佳">

不须要抓取的链接 nofollow

<a href="www.baidu.com" rel="nofollow">

指定为内部链接 external

<a href="www.baidu.com" rel="external nofollow">

指定页面图标

<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16">

<link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png" sizes="32x32">

很少用的属性

将中文简体转换为繁体

苹方字体无效，老老实实做 i18n 吧哈哈

font-variant-east-asian: traditional;