フロントエンドエンジニアの茶木です… IE11が終了して、思い切って使えるようになったCSSがあります。 そのひとつ CSS line-clamp についてです。 「3行超えたら省略の3点リーダー出したい!」とデザイナーの皆さんに言われたときに、 なるほど、そうですね、複数行の3点リーダー出したいですよね!わかります!ただちょっと不可能ではないんですけど、クロスブラウザでは、完全対応ができなくてですね、1行の省略だったら簡単なんですが、いえ、決して面倒臭がってるわけじゃなくてですね?デザイン上の必要性も理解してますよ?もちろん!ただ、IEで未対応のため、JSを書く必要がありまして、ブロックのサイズが可変だったりすると、リサイズが発生すると収まる文字数も代わりますでしょ?そうすると省略文字数を計算し直すのですが、それが大変というか、もちろん既存のポリフィルが無いわけじゃないんですが、ポリフィ
CSS Gridはブラウザに2次元のレイアウトを作成できるCSSの素晴らしい機能です。今までの実装方法に比べて、HTMLはより簡単で、CSSはより堅牢に実装することができます。 そんなCSS Gridの唯一の問題点は、ブラウザのサポートでしょう。 2018年4月現在、IE11のサポートが完全とは言えない状況ですが、IEへの対応のポイントをしっかり押さえておけば、CSS Gridでレイアウトを実装することができます。flexboxやfloatをフォールバックとして使用する必要もありません。 CSS Gridを使用する際、IE11にどのように対応させるのか、その注意点と実装方法を紹介します。 CSS Grid Application Layout in Production 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最初は、C
CSS Gridは非常に便利ですが、唯一の欠点はIE11以下・Edge15以下のユーザーをサポートする必要がある場合に期待通りに機能しないことです。 CSS Gridでページのレイアウト・グリッド・コンポーネントを実装する際に、IE11以下・Edge15以下をサポートするフォールバックのテクニックを紹介します。 Grid to Flex Grid to Flex -GitHub CSS Gridがレイアウトで優れている点は、水平方向と垂直方向の両方を制御して、レイアウトができるという点です。 Flexboxでは両方を制御することはできないため、その点に注意します。 CSS Grid, Flexboxについて学びたい時は、下記の記事がオススメです。 5分で完璧に分かる!CSS Gridの基本的な使い方を解説 CSS Gridの実装で必要な基礎知識、主要なプロパティと用語をくわしく解説 CSS
Windows10でのIE11サポート終了とともに、IE11対応HTML/CSSとさよならした皆さん、お疲れさまでした! (Windows8.1終了までIE11頑張るみなさん、お疲れ様です) 今更ですが、ぎりぎりまでIE11対応したので、最近のHTML/CSS事情が追い切れていません! ということで! 主にIE11対応なしなら、iOS13以降で(iOS14以降のCSSも最後に紹介しています)使えるHTML/CSSの中から、筆者が気になるものをまとめました! 数が多いため詳しい使い方は説明省きます! 利用する際は各自対応ブラウザ再確認をお願いしますJavaScript関連は紹介していません deep-space.blue は IE11→Edgeのリダイレクトリストに載せてしまっており、IE11(IE11モード)でデモを確認することは困難なのでIE11の場合の表示のスクリーンショットも記録とし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く