標準化されたCSSのzoomプロパティ
標準化されなかったzoom CSSのzoomプロパティをご存知でしょうか？ 有名（だった）なIE向けのハックとして *zoom: 1; などを記述したことがある人、または見たことがある人もいるかと思います。 zoom はIEの独自実装プロパティとして生まれいくつかのブラウザでサポートされたものの、長らく標準化されなかったことからサイトでの利用は推奨されることはありませんでした。 標準化されたzoomがNewly Availableに！ そんなzoomプロパティですが、標準化が進みBaseline 2024において「Newly Available」というステータスになりました👏 まだNewly Availableなので積極的な利用の推奨はできないものの、使い道を考えられるようになりました。 zoomに使い道がありそうな予感 CSSで要素を拡大する手段としてはtransform: scale
outlineプロパティで作った枠線は角丸にすることができない - dskd
公開日2015-11-30タグAdvent CalendarCSS追記（2021 年 10 月 5 日、2023 年 1 月 3 日、2023 年 3 月 28 日） 最近のアップデートでモダンブラウザ全てで「outline プロパティで作った枠線も角丸にできる」ようになった。 Mozilla Firefox v88（2021 年 4 月 19 日リリース） Google Chrome v94（2021 年 9 月 21 日リリース | commit） Microsoft Edge v94（2021 年 9 月 21 日リリース） Safari v16.4（2023 年 3 月 27 日リリース） なお、IE11 は対応しないまま役目を終えている。 時間がかかったが Safari が対応したのはめでたい。これで outline を丸めるために box-shadow で代用するテクニックはも
iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
IE First を避ける
まず、去年の実績として、IE のシェアが 9% から 5% になっています。 Browser Market Share Japan | StatCounter Global Stats 世界だと 1.4% です。これは途上国などでは Android Chrome が支配的だからです。 https://gs.statcounter.com/browser-market-share/all 国内で「IE シェア」などでググって出るサイトは 9% と出ていますが、これはデスクトップのみの数字で、モバイルを含めた数字は 5%前後です。日本はさらに Chrome ベースの新 MS Edge の正式リリースがコロナと確定申告の影響で延期されており、リリースのタイミングでさらに減ることが予想されます。 去年の実績値でいえば、来年度には 2% 台、再来年には 1%を切っている可能性があります。これは to
Bootstrap 5のリリースはもうすぐみたい！注目の新機能、jQueryは削除、IE10のサポートは終了へ
Bootstrap 5のリリースがいよいよ近づいてきたようです。 Bootstrap 5では、jQueryは削除され、IE10のサポート終了が予定されており、注目すべき新機能を紹介します。 Bootstrap 5 release date and what's new about it by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Bootstrap 5がリリースされる日 Bootstrap 5で注目の新機能 jQueryの削除 😱 IE10のサポート終了 📺 SVGのカスタムアイコン 🚀 JekyllからHugoへ切り替え 🔝 JavaScriptとCSSのアップデート はじめに Bootstrapがリリースされてから8年が経ち、現在では世界で最も人気のあるCSSフレームワークとなり
レスポンシブwebデザインのコーディングでやってること - kojika17
今年、携わった案件のほとんどがレスポンシブWebデザインでした。 今更ですが、私がレスポンシブWebデザインのコーディングでやっていることや気を付けていることを整理してみたいと思います。 User Agent Style Sheetの対応 ブラウザのデフォルトで設定されているスタイルシートの差異を埋めるCSSは「Normalize.css」をよく使います。 デザインによっては、Eric Meyer’s的なRest CSSの方がやりやすい場合もあるので、そこは見た目に臨機応変に対応してます。 CSS Flexible Box 私が受け持つ案件では、最新ブラウザ、及びInternet Explorer 11（IE11）のみの対応が増えたため、近年では、Flexible Boxをカジュアルに使用できるようになりました。 個人的には、広い画面では横並びだったものを、displayプロパティを変更す
Autoprefixerが進化してCSS GridのIE 11対応がバリ楽になった（2017年〜2018年） - Qiita
CSS Gridは便利なレイアウト手法ですが、IE 11にも対応する場合はベンダープレフィックスの付与や古い記法への対応が必要です。ベンダープレフィックスの付与や古い記法への対応を自動で行うのがAutoprefixerなのですが、2017年から2018年にかけてIE 11向けのGrid対応が大きく向上したことをご存知でしょうか？ 最近のAutoprefixerを使えば、次のようなメリットがあります。 IE 11向けに手動で書いていた-ms-grid-column-span、-ms-grid-row-spanを手動で書かなくてよい IE 11で非対応のgrid-template-areas、grid-areaを変換可能 gap（旧名grid-gap）をIE 11向けに書き出し可能 repeat()をIE 11向けの旧仕様で出力可能 ▲ AutoprefixerによるCSS GridのIE 1
ウェブ関連仕様 日本語訳（ www.hcn.zaq.ne.jp/___/WEB/ ）
このページ は、 Web プラットフォーム関連の いくつかの仕様の日本語訳の一覧と，それらの日本語訳に共通する事項についての説明です。 これらの翻訳の正確性は保証されません。 これらの仕様の公式な文書は英語版であり、日本語訳は公式のものではありません。 （実際に誤りが見つかることも時折あります。 それらについては見つかり次第修正され，加えて用語の対訳や言い回しなども時折修正されるので、これらの翻訳が「完成」する日は決して来ないとも言えます。） 一部の仕様は日々改訂され続けているので（特に WHATWG によるもの, あるいは W3C の編集者草案（ Editor's Draft ））、日本語訳は最新版と一致していないことがあります。 また、原文の更新に伴う，訳の更新の際に取り込み漏れがあるかもしれません。 その完全性は保証されませんが、ツールを利用して不定期に検証されてはいます（多数の更新
片手間のJavaScriptから脱出するためにこれからのWebエンジニアが理解すべきこと - Qiita
はじめに 最近、こういった記事が世間をにぎわせている。こりゃエヴァの話なんてしてる場合じゃねぇ！と思ってさくっとこの辺の事情を理解するために必要なことをまとめてみる。 Railsが時代に合わなくなってきた Javascriptを使うのをやめろ：Railsの時代遅れ云々についての結論 昔ながらの「片手間に書くJavaScript」の限界 GoogleやTwitterでも実現できないのだから使うな問題 この話は、どの地点の何の話をしているのかよくわからないのです。現在ではかなりステップバック＆改善が行われ、Safari自体のクラッシュはアプリのクラッシュと比べて、あまり多いとは思いません。むしろ、一昔前に比べてかなり改善しているという認識です。iOSのバージョンが古いとかでなければ、現状でも十分ユーザビリティの改善につながっているでしょう。 しかし、この問題の結構大部分を占めているのは個人的に
要素を天地左右中央に配置できる簡単超軽量スクリプト -Midway.js | コリス
デスクトップやスマフォ・タブレットのレスポンシブ対応で、画像やテキストなどを天地左右の中央に簡単に配置できる超軽量（1KB）のスクリプトを紹介します。 作業は、HTMLに2つ追加するだけです。 Midway.js Midway.jsのデモ Midway.jsの使い方 Midway.jsのデモ 天地左右中央配置は表示サイズを変更しても、変わらずに天地左右中央配置になります。 デモは、ブルーの矩形の中に、ホワイトの要素を天地左右中央配置にしています。 まずは、デスクトップサイズから。 デモページ：IE7モードで表示 Midway.jsの使い方 使い方は簡単で、ステップは2つです。 Step 1: 外部ファイル head内に、スクリプトを外部ファイルとして記述します。 <head> <script src="http://code.jquery.com/jquery-latest.js"></s
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrap 4はIE8をサポートしない
Internet Explorer 10 の日本語組版