search
LoginSignup
204
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

ie11がお亡くなりになった後に利用可能なcss周辺

先日、コリスで紹介されたcssプロパティのaspect-ratio(ie11以外のモダンブラウザで利用可)に感動して、ie11がお亡くなりになってから利用できる他のcss周辺技術が気になり調査してみた。

aspect-ratio

下記のように記述するだけで、縦横比が16:9のレイアウトが作成可能

width: 100%;
aspect-ratio: 16 / 9;

aspect-ratioを利用しない場合は、以下のように、beforeにpadding-top: 56.25%;を指定し、親や子の要素にpositionを設定するという面倒な対応をしないといけない

.parent {
  position: relative;
  width: 100%;

  &:before {
    content: '';
    display: block;
    padding-top: 56.25%; /* 16 : 9 */
  }

  .child {
    position: absolute;
    top: 0;
    left: 0;
  }
}

min(), max(), clamp()

便利css関数
例えば以下のようなコードをminを利用すると1行で置換可能

追記:minとmaxの認識が逆になっていました。。申し訳ありません。
↓この様な認識が正しいですね。
min('基本幅', '最大幅')
max('基本幅', '最小幅')

以下のコメントも修正しております。
minは最大幅を、maxは最小幅を第2引数で指定します。わかりにくいですね。

width: 50%;
max-width: 500px;

width: min(50%, 500px); /* 第2引数がmax-widthの値 */

同じ様に、maxを利用すると、下記のように置換可能

width: 100%;
min-width: 1280px;

width: max(100%, 1280px); /* 第2引数がmin-widthの値 */

min と max を合体させたようなものがclamp

width: clamp(500px, 100%, 1280px); /* min-width, width, max-widthを1行で指定可能 */

object-fit

画像の縦横比を要素に併せて伸縮する指定。ブラウザ幅を拡縮しても維持可能
これがあると、imgタグのwidthやheightの調整がかなり楽。
object-fit: cover;が特に良い。

See the Pen CSS object-fit by Dudley Storey (@dudleystorey) on CodePen.

↓参考リンク
https://webdesignday.jp/inspiration/technique/css/7976/

mix-blend-mode

要素の重ねた時の見え方を指定するプロパティ
https://ics.media/entry/7258/

驚くべきなのは、mix-blend-mode: multiply;
白背景の画像を透過可能


See the Pen
jpg-LOGO mix-blend-mode multiply
by Kobayashi (@Pulp_Kobayashi)
on CodePen.


backdrop-filter

画像に対して、ぼかしやグレースケール等といったフィルターをcssで実装可能


See the Pen
Image filter backdrop-filter
by Kobayashi (@Pulp_Kobayashi)
on CodePen.


clip-path

要素の形状を自由に変形させる事が可能


See the Pen
clip-path examples
by Chris Coyier (@chriscoyier)
on CodePen.


clip-pathの各種図形の参考
https://bennettfeely.com/clippy/

scroll-snap-type, scroll-snap-align

cssだけでカルーセルを実装可能なcssプロパティ
overflow-x: scroll; よりもスライドした時にしっかり要素で止まる感じがいい


See the Pen
CSS Carousel
by Kobayashi (@Pulp_Kobayashi)
on CodePen.


.wrap {
    scroll-snap-type: x mandatory;
    white-space: nowrap;
    overflow-x: auto;
}

.item {
    scroll-snap-align: center;
    display: inline-block;
    width: 40%;
    white-space: normal;
}

display: grid;

基本的な使い方としては、格子状のレイアウトが組む事が可能

上下中央表示。display: flex;だと3行必要

display: grid;
place-items: center;

position: absoluteが必要な要素を重ねるレイアウトもdisplay: gridがあれば、実現可能


See the Pen
Less absolute - Card
by Ahmad Shadeed (@shadeed)
on CodePen.



position: sticky;

jsのscroll系ライブラリを利用しないと実装できないようなスクロール後に吸着する様な実装が可能


See the Pen
Heading Follow position sticky
by Kobayashi (@Pulp_Kobayashi)
on CodePen.


calc()内でvwが利用できる

レスポンシブで、width: calc(100vw - 30px); のような実装をした時に、
ie11のみで意味不明な挙動をしたけれどもie11がお亡くなりになったら思う存分calcを利用可能

参考

CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法
https://coliss.com/articles/build-websites/operation/css/css-ways-to-create-fixed-aspect-ratio.html

CSSの比較関数が便利すぎる!min(), max(), clamp()の使い方を詳しく解説
https://coliss.com/articles/build-websites/operation/css/css-about-min-max-clamp.html

IE終了後にWeb制作の現場で使えるHTML&CSSコード14選!おさえておきたいコードを集めてみた
https://pulpxstyle.com/ie-not-supported-css/

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
204
Help us understand the problem. What are the problem?