Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8651

IEさえ、、IEさえいなければ・・・こんなに便利な機能が・・・

$
0
0

どうも、7noteです。IE好きの方はみないでください。

(この記事は、IEの影響で安易に使えないCSS3選の記事です。)

ちょうど本日、
「Microsoft 365サービスが「IE 11」サポートを2021年8月終了--旧「Edge」予定も明らかに」
というニュース記事が上がっており、一瞬


「えっ、ついにIE終了か?!」


と思いましたが違いました、残念。

Microsoft 365サービスにおけるIE11のサポートを終了するだけなので、まだまだIEは続くようですね。

はぁ。。。

IEさえいなければ、こんなに使えるCSSがたくさんあるのに。

filter:~~;(画像の色変えれるのに・・・)

画像にぼかしや色変化などのグラフィック効果が可能になる。

filter:blur(5px);/* ぼかし */filter:contrast(200%);/* コントラストを強く */filter:grayscale(80%);/* グレースケールに変更 */filter:hue-rotate(90deg);/*色相を変更(回転)*/filter:drop-shadow(16px16px20pxred)invert(75%);/*影*/

これがあれば、1種類の画像で複数色に対応できたり、
コントラストを調整させたりが可能になるのに・・・

fillter.png

positon: sticky;(スクロール固定できるのに・・・)

スクロールの途中からついてくる要素を作れる

position:sticky;

sticky.gif
引用:https://developer.mozilla.org/ja/docs/Web/CSS/position

あと、stickyはSafariだと、display: inline;display: inline-block;だと効かないとか。
display: block;display: flex;を指定している要素にstickyを当てるようにしましょう。

(※PolyfillがあればIEでも可能)

object-fit:~~;(画像のトリミング変えれるのに・・・)

object-fit: cover;を使うと、img要素でもbackground-size: cover;のような自動トリミングを使うことができます。

object-fit:cover;

wordpressとかで呼び出した画像のトリミングなどをcssで一発解決できたら楽ちんなのに。。。

(※PolyfillがあればIEでも可能)

まとめ

まだまだフロントエンジニアによるIEとの戦いは続きますが、めげずに技術や情報を駆使していいサイト作りを続けていきましょう!
他にもIEの影響で使えないCSSなどがあれば共有ください!記事に追加させてもらいます!

おそまつ!

(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)


Viewing all articles
Browse latest Browse all 8651

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>