818 CSS 属性

[evantianx]

目录: Custom Properties

参考文章:

It’s Time To Start Using CSS Custom Properties Making Custom Properties (CSS Variables) More Dynamic

[evantianx]

Custom Properties(自定义属性)

基本用法：

/*-----声明方法举例-----*/
:root {
  /* 在:root中声明的变量全局皆可访问 */
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;

  --header-height: 68px;
  --content-padding: 10px 20px;

  --base-line-height: 1.428571429;
  --transition-duration: .35s;
  --external-link: "external link";`
  --margin-top: calc(2vh + 20px);

  /* 可以用在JS中 */
  --foo: if(x > 5) this.width = 10;
}

/*-----使用方法-----*/
.box {
  --box-color:#4d4e53;
  --box-padding: 0 10px;

  padding: var(--box-padding);
}

.box div {
  color: var(--box-color);
}

• fallback 值

  可以为var()提供第二个参数来回退，防止某个自定义属性误删之后造成混乱。

  .box {
   --box-color:#4d4e53;
   --box-padding: 0 10px;
  
   /* 由于未定义--box-margin，所以会赋值为10px */
   margin: var(--box-margin, 10px);
  }

• 可以互相套用

  .box {
   padding: var(--box-padding, var(--main-padding));
  
   --box-text: 'This is my box';
  
   /* 此条规则相当于: --box-highlight-text:'This is my box with highlight'; */
   --box-highlight-text: var(--box-text)' with highlight';
  }

• 配合calc()使用

  :root {
   --indent-size: 10px;
  
   --indent-xl: calc(2 * var(--indent-size));
   --indent-l: calc(var(--indent-size) + 2px);
   --indent-s: calc(var(--indent-size) - 2px);
   --indent-xs: calc(var(--indent-size) / 2);
  }

  当calc()中的变量发生变化时，其计算值也会同步更新。

  同时，若var()计算所得值无变量，直接加 px 是无效的；而通过calc()可以使用无单位变量:

  :root{
   --gap: 10;
  }
  
  .box{
    padding: var(--spacer)px 0; /* DOESN'T work */
    padding: calc(var(--spacer)*1px) 0; /* WORKS */
  }

• 改变立即生效

  在Sass中:

  /* font-size值将为30px */
  .closure {
   $closureVar: 30px;
   font-size: $closureVar;
  
   $closureVar: 50px;
  }

  而在CSS自定义属性中:

  /* font-size值将为50px */
  .closure {
   --closureVar: 30;
   font-size: --closureVar;
  
   --closureVar: 50px;
  }

  即: 如果重新分配一个自定义属性的值，浏览器会重新计算所有应用它的变量值及calc()值

• 预处理器不会依据DOM的结构作调整

  <div class="default">
    default
  </div>
  
  <div class="default highlighted">
    default highlighted
  </div>

  使用CSS 自定义属性:

  .highlighted {
   --highlighted-size: 30px;
  }
  .default {
   --default-size: 10px;
   font-size: var(--highlighted-size, var(--default-size));
  }

  使用Sass:

  .highlighted {
    $highlighted-size: 30px;
  }
  
  .default {
   $default-size: 10px;
  
   /* Use default-size, except when highlighted-size is provided. */
   @if variable-exists(highlighted-size) {
       font-size: $highlighted-size;
   }
   @else {
       font-size: $default-size;
   }
  }

  虽然结果完全一样，但是可以看出，CSS自定义属性做出的样式调整完全依照DOM结构，而预处理器完全是依靠代码结构产出样式。

CSS 自定义属性和all属性

当我们需要初始化某个组件的样式时，我们可以利用all属性:

.my-initial-component {
  all: initial;
}

但是很可惜，目前为止all属性的重置范围不包括自定义属性，目前解决方案正在商议中。

CSS 自定义属性使用场景

• 计算不存在样式(我理解为计算继承属性值)

  .text {
   --box-shadow-color: yellow;
   box-shadow: 0 0 30px var(--box-shadow-color);
  }
  .text:hover {
   --box-shadow-color: orange;
  }

• 通过 JS 调用 CSS 自定义属性 我们可以通过getPropertyValue()和setProperty()方法直接与设置有自定义属性的值互动。

  /* 获取自定义属性值 */
  function readCssVar (ele, varName) {
   const eleStyles = getComputedStyle(ele)
   return eleStyles.getPropertyValue(`--${varName}`).trim()
  }
  /*为自定义属性赋值*/
  /* 也可用来赋予初始值， 没有必要先在 CSS 中设置初始值 */
  function writeCssVar (ele, varName, value) {
   return ele.style.setProperty(`--${varName}`, value)
  }
  /* 移除自定义属性 */
  function removeCssVar (ele, varName) {
   const eleStyles = getComputedStyle(ele)
   eleStyles.removeProperty(`--${varName}`)
  }

• 改变 theme

  CSS Custom Properties and Theming

CSS 自定义属性的浏览器支持

目前各大浏览器都提供了很好的支持(除 IE 外 🙄 )

若需要兼容旧式浏览器，在 CSS 中:

@supports ((--a: 0)) {
   /* supported */
}

@supports (not(--a: 0)) {
  /* not supported */
}

在 JS 中:

const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0);

if (isSupported) {
   /* supported */
} else {
  /* not supported */
}

这种兼容方式还需要浏览器支持@supports，略为不妥。

CSS3 自定义属性用来修改属性集中的单个属性

:root {
  --box-shadow-offset-x: 10px;
  --box-shadow-offset-y: 2px;
  --box-shadow-blur: 5px;
  --box-shadow-spread: 0;
  --box-shadow-color: #333;
}

.element {
  box-shadow:
    var(--box-shadow-offset-x)
    var(--box-shadow-offset-y)
    var(--box-shadow-blur)
    var(--box-shadow-spread)
    var(--box-shadow-color);
}

并不存在box-shadow-color这个属性，但我们利用 CSS3 自定义属性还是可以单独地去修改它。

Now that CSS Custom Properties are a Thing, All Value Parts Can Be Changed Individually

Using CSS variables correctly

合理使用自定义属性，亮点在于通过媒体查询来设置自定义属性值，这样可以使代码更为简洁

Everything you need to know about CSS Variables

[evantianx]

CSS3 / CSS4 中的各种伪类或伪元素

:focus-within

The :focus-within pseudo class

:focus-within不同于:focus，前者在本身获取到焦点或子元素获取到焦点的时候激活，后者只有本身获取到焦点的时候才激活。

目前各大浏览器支持度还挺低

the-focus-within-pseudo

[evantianx]

CSS2 中属性

参考文章:

outline-offset

outline-offset

设置outline与border之间的距离，值可以设置为负数， 0， 正数，不能为百分数。

不同于border，outline不占据空间，即不会破坏布局。

outline为outline-width，outline-style，outline-width的缩写，不包括outline-offset!

关于 float

How browsers position floats

[evantianx]

参考文章: Fun with Viewport Units

Viewport Units

分别有 vw, vh, vmin, vmax 四个视口单位。

响应式字体

根据设备尺寸调整显示字体的大小

h1 {
font-size: calc(1.2em + 3vw);
}

@media (min-width: 50em) { h1 { font-size: 50px; } }

[evantianx]

filter: drop-shadow()

与 box-shadow 不同的是，阴影是按照元素形状生成的，而非 box 盒子阴影。

breaking-css-box-shadow-vs-drop-shadow