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
2020年以降のIE11対応に関する意見 ～ Internet Explorerを終わらせるのは、誰か？
HOMEポエム2020年以降のIE11対応に関する意見 ～ Internet Explorerを終わらせるのは、誰か？ あと1年足らずで2020年になりますね。東京オリンピック？2020年問題？まあ世間でも節目だのなんだの言われておりますけれども。んなこたぁーどうでもいいんです（※真面目な話をすると需給に影響があるので実際はどうでもよくはない）。我々にとって重要なことは、2020年1月14日でWindows 7のサポートが切れるということ。え？だから何だって？いよいよ要らないIE11を窓から投げ捨てるチャンスってことです。 ※本記事は読み物系の内容なので、いつもよりは（ウェブ関係者寄りの）万人向けに書いていますが「Internet Explorer」と「Yahoo!」の違いが分かる程度の知識レベルは要求する内容となっておりますのでご理解のほどよろしくお願いいたします。あとめっちゃ長いんで超
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 で代用するテクニックはも
IE10のDOCTYPEスイッチによるStandard/Quirksモードの切り替え一覧表 - ふろしき Blog
IE10には、古いIEの動作とHTML5との相互運用を可能としたレンダリングエンジンとして動作するQuirksモードと、最新のレンダリングエンジンとして動作するStandardモードがあります。HTMLドキュメントの一番上でのDOCTYPE宣言を行うことにより切り替えを行います。 IE10の場合、「X-UA-Compatibe」へ「IE=EmulateIE」というパラメータを与えることにより、過去のIEの動作を再現させることができます。EmulateIEは、5/7/8/9の3種類を持っています。5を指定すると常に「Quirksモード」として動作しますが、7/8/9の場合、DOCTYPE宣言の内容によって「Quirksモード」か「IE7/8/9 Standardモード」のどちらかへ遷移します。 ▼ HTMLドキュメント内で宣言する場合 <meta http-equiv="X-UA-Compa
IE11の互換表示リスト(互換表示一覧)の使い方/動作仕様 - ふろしき Blog
IE11には、正常な動作が行えない古いWebコンテンツを利用できるようにするために、「互換表示リスト(互換表示一覧)」という機能が提供されています。 本記事では、「互換表示リスト(互換表示一覧)」の動作仕様について説明します。 互換表示設定から追加 リストに追加すると何が起こるのか？ 互換表示リストの設定内容を無効化させる方法 1. 互換表示設定から追加 Altキーを押下すると、コマンドバーが表示されます。その後、以下の手順に沿って入力して下さい。 ウィンドウ「互換表示設定」が表示されるので、以下を設定します。 ※ IE8〜10には「互換表示ボタン」という機能があり、これを利用すれば互換表示リストへの登録が簡単に行えましたが、11からは削除されています。 2. リストに追加すると何が起こるのか？ 常に、IE7 Standardモード(IE7の機能のエミュレート)として動作します。 3. 互
IEでの互換表示設定とhtmlのMETAタグでのX-UA-Compatible設定の違い
IE9ででIE7標準のhtmlを互換表示させるためにMETAタグに以下の設定を入れています。 <META http-equiv="X-UA-Compatible" content="IE=7" /> ところが、ブラウザで「互換表示設定」を行うのと、上記metaタグに互換設定を入れるのとで、表示が異なる場合があります。 具体的に把握できたのは以下になります。 １．cssのスタイルをclass=で設定した場合に、「互換表示設定」ではclassに指定したstyleの大文字と小文字は区別していないようですが、METAタグで指定した場合には大文字と小文字を区別する ２．styleにwidth="10"などpxなどの単位を指定しなかった場合に、「互換表示設定」では自動的にピクセルとみなされるが、METAタグで指定した場合にはサイズ設定自体が無効になる 質問 ブラウザでの互換表示設定とhtmlのMETA
CSSのセレクタ数を調べる
気になったので調べたら、いくつかの方法があった。 JavaScripthttps://gist.github.com/psebborn/1885511/そのままコンソールに打ち込んだり、ブックマークレットとかにして調べるのも良さそう。Grunthttps://github.com/xzyfer/ie9-selector-counterhttps://github.com/xzyfer/grunt-ie9-selector-counter試してみたけど、ちょっと出力の仕方が微妙な気がする…PHPhttp://snippet.bevey.com/css/selectorCount.php調べたいCSSをアップロード、もしくはそのURLを入力して送信bashhttp://alias.sh/count-number-selectors-css-filebashrcとかに書いて、$cat style
おじさんがIE8でReact.jsを使うために頑張った話 - ugon105’s blog
4年ぶり・・・！ 今ははてなブログを使うべきなんでしょうか？まぁいいや、おじさんだから。 3年くらい前から開発は若い者に任せていたので、技術に疎くなっていたけど、React.jsが面白そうだったので社内の古いサービスを密かに改修して遊んでいます。 すると自然におじさんがこそこそ使っているWindows XP環境も少しトレンドになれた気がするので、世のおじさんたちもReact.jsで遊ぶといいと思う。 簡単に言えば、React.jsを使ったら、Node.js も入れることになったりして最近の技術（Webフロントサイド）を学ぶことができそうという話。だからおじさん以外は帰ってください。 1. React.jsで遊んでみる React.js を使うとDOM操作がうまいことになる。 React.js は画面の部品をコンポーネントとして表現していて、Javascript内でクラスとして定義し、ren
Foundation Open Source Community - Foundation Open Source Community
Community for the most advanced responsive front-end framework in the world.
【JavaScript】IE9以前でconsole.logを使用しているとハマる - Qiita
##はじめに FirefoxとかChromeなら問題ないがIEだと上手く動作しないとかはよくある話だと思う。その要因の一つであるconsole.log使用時のエラーに、つい最近ハマったのでメモしておく。 ##対処法 そもそもなぜconsole.log使用時にエラーが出るのかといえば、IEがConsoleAPIに対応していないために、window.consoleの時点でundefinedを吐くからである。対処法としては、 // consoleプロパティとlog関数作ってとりあえずエラー回避 if(!window.console) { window.console = { log: function(msg){} }; }
Rails asset pipeline solution for IE 4096 selector/stylesheet limit
The problem Microsoft's IE support documentation explains that in Internet Explorer 6-9: All style tags after the first 31 style tags are not applied. All style rules after the first 4,095 rules are not applied. On pages that uses the @import rule to continously import external style sheets that import other style sheets, style sheets that are more than three levels deep are ignored. There is a lo
IE9以前におけるスタイルシート制限 | HTML5GOGO
HTML5の内容ではありませんが、IEの仕様でどうしても確認しておきたいものがありましたので検証してみました。 IEの気になる仕様は下記のスタイルシートの制限についてです。 (1) IE9以前で1つのCSSファイル、または1つのstyleタグ内のセレクタは4095個目までしか適応されない。 (2) IE9以前でCSSファイル、またはstyleタグは31個目までしか適応されない。 Microsoft サポート http://support.microsoft.com/kb/262161/ja http://support.microsoft.com/kb/262161/en-us 普通にコーディングする分には問題無いように思いますが、SCSSなどを使用した際にうっかり4096個以上のセレクタが指定されてしまう可能性が無いとも言えないので軽視できません。 検証1 早速(1) 「IE9以前で1つ
DAD UNION – エンジニア同盟｜世のエンジニアを手助けするテック系サイト
JavaScript JavaScriptで簡単にBase64エンコード＆デコードの完全ガイド 2024-06-10 dad-union
Webアクセシビリティのチェックツール｜エー イレブン ワイ ［WebA11y.jp］
Web Accessibility Toolbar 2012J ブラウザのInternet Explorerで利用できるツールバー（無償）。対応OSは、Windows Vista以降、対応ブラウザはIE8以上。 IEのツールバー「Web Accessibility Toolbar 2012J」の詳細 カラー・コントラスト・アナライザー 2013J WCAG 2.0やJIS X 8341-3:2010の達成基準で定められたコントラスト比など、色に関するチェックツール（無償）。 色のチェックツール「カラー・コントラスト・アナライザー 2013J」の詳細 ツールがあれば全ページを自動的に検証できるのか？ 「エー イレブン ワイ（WebA11y.jp）」では、無償のチェックツールを配布しています。Webコンテンツのアクセシビリティをチェックするツールには様々なものがありますが、全てのチェックを完全
IE で、透明なオーバーレイ要素に mouseover 、 mouseout イベントが発生しない - IT戦記
はじめに IE では透明なオーバーレイ要素のマウスイベントのハンドリングがおかしい たとえば 以下のページで表示されている要素には透明な div がオーバーレイされています。そして、その要素に mouseover が発生すると背景を青くしています。 試してみてください。 IE では、想定の挙動ができていないことが分かると思います。 http://amachang.sakura.ne.jp/misc/mouseoutover/ ソースコードは以下。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <style> p { border: solid 10px gray; background: pink; padding: 10px; margin: 10px; line-height: 2; }
zoomを使うとlist-style-typeがおかしくなる
こんばんわ、おひさしぶりです。 溝上です。 なんだかひさしぶりにブログを書く気がします。 そんなわけで今回は軽くリハビリがてら、 最近遭遇したIEのバグについてお話したいと思います。 それでは早速サンプルをご覧ください。 ▼スクリーンショット ※スクリーンショットは、Windows Internet Explorer 6.0のものです。残念です。 （htmlコーディング） <ol class="number"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> </ol> <ol class="alphabet"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> </ol> （cssサンプル） li{ zoom:1; } ol { margin-le
IE8/IE9の「ブラウザーモード」と「ドキュメントモード」のまとめ
先日エントリーした「IE6/IE7/IE8/IE9の共存まとめ」で書いたとおり、IE8/IE9の開発者モードには「ブラウザーモード」と「ドキュメントモード」が用意されています。これを利用すれば、IEの旧バージョンの表示や挙動などを確認できるようです。 ブラウザーモードの選択 ドキュメントモードの選択 が、公式サイトの「ブラウザーモード」と「ドキュメントモード」の説明（７項に掲載）を読んでも、それぞれの使い方が良く分かりません。 ということで、本エントリーで「ブラウザーモード」と「ドキュメントモード」を変更することで、なにがどうなるかを調査してまとめました。参考になれば幸いです。 １．サンプル 説明は後回しにして、「ブラウザーモード」と「ドキュメントモード」を変更すると何がどのように変わるか、簡単なサンプルを作ってみました。 サンプルページ このページをIE8またはIE9で表示して「ブラウザ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Internet Explorer zero-day lets hackers steal files from Windows PCs
游ゴシックのfont-family指定方法！@font-faceは絶対NG！WindowsのChromeでかすれる問題徹底検証 | WEMO
メモメモ：何故かIEだけopacityが効かない時の原因 | webwedge.jp