Open10

CSS

ke1take1ta

text-decoration-colorはtransitionが適用されるみたい。

そもそも何がtranstionに適用されないのかを調べたほうが良さそう

ke1take1ta

ようやくclampの計算まわりをちゃんと理解にもっていった気がする。

sassのfunctionで作ったのを備忘録しておく。
1remを10pxにする案件もあるので、ここも引数で変更できるように。
あとそもそもremじゃないとき用の場合分けもしとく。

/*
 * clamp関数(最小値, 推奨値, 最大値)を返す
 * $isRem: remで返すかどうか
 * $val_when_min_width: 最小画面幅時の値
 * $val_when_max_width: 最大画面幅時の値
 * $min_width: 最小値の適用する画面幅
 * $max_width: 最大値の適用する画面幅
 * $base_rem: 1remのpx値
*/
@function set_clamp(
  $val_when_min_width,
  $val_when_max_width,
  $min_width: $breakpoint_xs,
  $max_width: $breakpoint_xl,
  $base_rem: 10,
  $isRem: true
) {
  $x1: $min_width;
  $y1: $val_when_min_width;
  $x2: $max_width;
  $y2: $val_when_max_width;
  $min_val: min($y1, $y2);
  $max_val: max($y1, $y2);
  $is_reverse: $val_when_min_width > $val_when_max_width;

  $slope: calc(($y2 - $y1) / ($x2 - $x1));

  $intercept: calc($y1 - ($slope * $x1));

  @if ($isRem) {
    @return clamp(
      #{calc($min_val / $base_rem)}rem,
      #{$slope * 100}vw + #{calc($intercept / $base_rem)}rem,
      #{calc($max_val / $base_rem)}rem
    );
  } @else {
    @return clamp(#{$min_val}px, #{$slope * 100}vw + #{$intercept}px, #{$max_val}px);
  }
}
ke1take1ta

aspect-ratio は 親要素にflexが指定されていると効かない。
flexの仕様によって子要素の高さが指定されているのかな？👀

ke1take1ta

中央寄せの左寄せは

.hoge {
  display: grid;
  justify-content: center;
}

で良さそう

ke1take1ta

align-items とalign-self が同じ文字列であったりするのでちゃんと違いを理解する。

ke1take1ta

擬似クラス関数 has を用いる際に、子要素が何も無いを表現するのに :empty が使えるが、iframeだとその中身を判定する術が無い。
(iframeはいわば窓で、窓の向こう側にcssではアクセスできないっぽい)

ke1take1ta

display: none とかに対してもアニメーションを付与させる！

.hoge {
    transition-property: transform, display, opacity;
    transition-timing-function: ease;
    transition-duration: 0.4s;
    transform-origin: bottom;
    transform: scaleY(0);
    transition-behavior: allow-discrete;
    
    @starting-style {
        transform: scaleY(0);
        display: none;
        opacity: 0;
    }

    &.active {
        display: block;
        transform: scaleY(1);
        opacity: 1;
    }
}
ke1take1ta

脳死改行制御(ハイフン始まりとかさせない)

.hoge {
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
}