株式会社アプリコットデザイン株式会社アプリコットデザイン

tel.0120-622-835

営業時間/10:00〜18:00 定休日/土日祝日

tel.0120-622835

営業時間/10:00〜18:00 定休日/土日祝日

  • instagram
  • facebook

BLOGスタッフブログ

トップページ > ブログ > IEのサポート終了してからのCSS事情

IEのサポート終了してからのCSS事情

UPDATE : 2022.08.09

CATEGORY :
Hirabayashi
Hirabayashi

Hirabayashi

こんにちは、かずです。

8月8日は世界猫の日だったそうです。
23時50分前後に知って何もできませんでした・・・


はい、というわけで今日はIEのサポートが終了したので
使い始めたCSSをいくつかご紹介します。


clip-path

便利ですねー。
普通に要素を丸くするだけなら「border-radius」と「overflow:hidden」で事足りますが、できない形も多々あったのですごく助かっています。
(すぐに例が出てきませんが・・・)

種類が色々あり、覚えるのも至難の業なので、下記サイトをぐりぐりしながら使ってます。これもまた便利。



filter

グレースケールやぼかし効果につかえます。
ただ、自分的にかなり便利と思ったのが、「filter: drop-shadow」です。
「box-shadow」では、要素のフチに影をつけるのが限界でしたが、こちらはpngやsvgの形に沿って影をおとせるスグレモノ。
参考にアプリコットデザインのロゴを以下に。

こちらがbox-shadow
こちらがdrop-shadow

もう画像書き出し時に影をつけるかどうかなんて迷わないですね!



object-fit

続いてこちら。コンテナの大きさに合わせて画像をトリミングしてくれます。
ただ、jsライブラリを使ってIEも対応できていたので、js使わなくなって楽になったなーくらい・・・



そして最後にイチオシのこちら!!

line-clamp

テキスト省略はこれまで「text-overflow: ellipsis」を使って1行で省略するか
phpで「mb_strlen()」で数えて、「mb_substr()」で制限付けて・・・みたいに面倒でしたが
このline-clampを使うことでもう全部解決!

下記テキストを省略していきます。※長くてすみません

私も今いったいその安心方というのの上をしないた。近頃今日に戦争院はとにかくその活動たなくなりへ上るて下さいましには希望するですまして、まだにはしましたですた。人格をするた訳はまあほかの万なうまし。ことに大森君から詐欺画いっそ真似が考えず手段その個人私か仕事をというご帰着ですですごとくませから、どういう今は彼らか人尻馬が会って、岡田君のものを世界のどこをはなはだ皆発展と聴きて私外国をご附与からしようにようやくご意味にやっだなけれと、初めて何だか学習に見えますからならなものに知れだな。しかしそこでおろからすれものはしっかり愉快とできるたて、その師範をはおらでてというところを思いてならたべき。


2行指定

私も今いったいその安心方というのの上をしないた。近頃今日に戦争院はとにかくその活動たなくなりへ上るて下さいましには希望するですまして、まだにはしましたですた。人格をするた訳はまあほかの万なうまし。ことに大森君から詐欺画いっそ真似が考えず手段その個人私か仕事をというご帰着ですですごとくませから、どういう今は彼らか人尻馬が会って、岡田君のものを世界のどこをはなはだ皆発展と聴きて私外国をご附与からしようにようやくご意味にやっだなけれと、初めて何だか学習に見えますからならなものに知れだな。しかしそこでおろからすれものはしっかり愉快とできるたて、その師範をはおらでてというところを思いてならたべき。


3行指定

私も今いったいその安心方というのの上をしないた。近頃今日に戦争院はとにかくその活動たなくなりへ上るて下さいましには希望するですまして、まだにはしましたですた。人格をするた訳はまあほかの万なうまし。ことに大森君から詐欺画いっそ真似が考えず手段その個人私か仕事をというご帰着ですですごとくませから、どういう今は彼らか人尻馬が会って、岡田君のものを世界のどこをはなはだ皆発展と聴きて私外国をご附与からしようにようやくご意味にやっだなけれと、初めて何だか学習に見えますからならなものに知れだな。しかしそこでおろからすれものはしっかり愉快とできるたて、その師範をはおらでてというところを思いてならたべき。


はい好き。便利すぎない・・・?


といくつかご紹介させていただきました。
他にもたくさん便利なCSSが制限なしに使えるようになりましたが
実務で割と頻繁に使うものになります。

正直、Can I use…を見る機会が減ったのが何よりも時短になっている気がします。

それはさておきこれからもこんな使い方も出来る!みたいなものがあればどんどん紹介していこうと思います!

それでは。

この記事を書いた人Who wrote this blog

Hirabayashi Kazuaki

猫をこよなく愛するコーダー

RELATED POST関連する記事

CONTACTお問い合わせ

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

  • 信州ファームデザイン
  • 信州ファームマーケット
  • 株式会社POCKET
  • 株式会社Think for Design