@supportsとIE11
Internet Explorer 11以下では@supportsがサポートされていない。そのおかげで実装ベースで(CSSハックなどというものなしに)安全にCSSの新機能を試せるようになった。しかしそうなるとIE11などというもののために大量の@supportsが出てくることになり、精神衛生上良くない。実装がある方を優先させCSS全体を適当な@supportsで括ってしまえば良さそうだ。 View Demo: Ban <=IE11 with @supports デモの段落は@supportsをサポートしている安定ブラウザーでは緑になり、IE11ではちゃんと赤になる。不明なAt規則とその子は無視されるようになっていることが確認できる。CSS仕様でもそうだが、IE11以下を含めおおよそすべてのブラウザーでこういう実装になっているはずだ。 CSS全体を括るのは雑過ぎるので、実際にはFlexbox
備忘録_IE7 / IE8 / IE9 対策 - Qiita
ターゲットブラウザにIE7案件に遭遇したため調べたことを整理しておく。 ちなみに、IE10以下のサポートは2016年1月に終了している https://www.microsoft.com/ja-jp/windows/lifecycle/iesupport/ HTML対策 HTML5タグの認識 IE9未満はHTML5タグに未対応のためタグをブロック要素として認識させるために「html5shiv」を導入する 導入することでHTML5の構造化タグ(header / footerなど...)には対応できるが動画編集タグ(videoなど)には対応できない ※ちなみに今でも更新されていることに驚いたの内緒・・・ <!--[if lt IE 9]> <script src="./common/js/html5shiv.js"></script> <![endif]--> [if lt IE 9] → I
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ
CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま
シェアの少ないJS殺しブラウザ対応の話 - Qiita
これらのDOMイベントは サポートされていない。 Everything requires a server round-trip. リンクやボタンは全てOperaサーバーへのリクエストを発行してしまう。 In addition, links, buttons and most elements with a mouse event listener are transformed into hotspots. When a user clicks or taps on such a hotspot, it triggers a server request. If the hotspot has an event listener attached, its handler will be called during that request, and executed by the se
I am expecting to iOS 9.0 Mobile Safari features. - latest log
iOS 9.0 に入るかもしれない機能をまとめてみました。公式なものではないため参考程度にお願いします。 WebKit 公式の Feature Status もご覧ください。 (ε・ ワ ・)з 40〜50時間ぐらいドブに捨てて書いている気がしますが、2分で読めます via https://github.com/uupaa/WebKitChangeLog/wiki/iOS9.x.x.changesets WebKit 600.1.4 以降の変化をまとめました。 WebKit の Changeset から読み取れる情報を元に構成されており、検証中のものが多く含まれています。あくまで予想です。 HTML/DOM node.style.webkitFontFeatureSettings が実装されました DocumentFragment に getElementById が実装されました Doc
これって使えたっけ？今だからこそ IE8 対応コーディングのポイントをおさらい | バシャログ。
こんにちは。Latinです。 今年は長めの夏休みが取れそうなので、旅行でも行こうと画策しております。 さて今回は、久々にコーディングネタです。 弊社の最近の案件では、対象ブラウザがIE8+という案件がほとんどになってきました。 「安心してください。IE10以上です。」 なんて言われたら嬉しい限りなんですが、まだまだ少ないのが実状です。 「悪夢のIE7対応」を考えなくて良くなっただけでもコーディングはだいぶ楽になりましたが、「IE8」は「IE8」でいろんなクセを持ってますよね。 今回はそんな今だからこそ、「IE8対応のポイント」をまとめてみます。 【IE8の仕様編】 HTML5に対応していない HTML5のサイトで「IE8対応」が必要になってくる場合、ポピュラーな方法としては二つあります。 html5shiv.js などの拡張ライブラリを IE9 以下のIEで読み込ませる HTML5要素自体
A Practical Guide to SVGs on the web
Introduction We live in the age of pixels. As designers & developers of the web, pixels can be both our friends and our enemies. We want everything to look nice and sharp for anyone who uses any of the websites we work on, but we need to keep file sizes down for performance. There is pretty much only one way to go with icons, logos and illustrations on the web — SVG. Scalable Vector Graphics can l
CSS での OpenType 機能の構文
この機能は、一連の字形を「合字」と呼ばれる 1 つの字形に置き換えます。合字は、タイポグラフィの目的で好んで使用されます。この機能を有効にすると、通常の状況ではデザイナーやベンダーの審査に使用するような合字が挿入されます。 この合字機能は、デフォルトで有効です。そのため、通常は CSS を記述しなくても動作します。ただし、Chrome ではデフォルトで有効になりません。また、Safari（Mac または iOS）では無効にできません。Chrome と Firefox の一部のバージョンでは、スペースを含む合字で問題が発生します。 .class { font-variant-ligatures: common-ligatures; -moz-font-feature-settings: "liga", "clig"; -webkit-font-feature-settings: "liga"
写真サービス機能のブラウザ内実装 | 株式会社サイバーエージェント
2-1. リサイズ処理 Figure 2. Mobile Safariによる画像アップロード画面 最終成果の画像データを、サーバーサイドAPIにPOSTすることがゴールである。Androidにおいて、XMLHttpRequestでBlobをリクエストに設定しても空のボディで送信される問題がみられるため、今回はBase64 encoded DataURIとしてPOSTすることにしている。 2-1-1. 基本実装 ƒ 今回のリサイズ処理では、Canvas要素とFile APIを利用する。基本方針としては、inputtype='file'のchangeイベントから、Fileオブジェクトを取得し、それを一度Canvasに書き出すことでリサイズを試みる。最終的には、canvas.toDataURL() によってDataURIを取得する。 下記に、基本実装のサンプルを示す。( http://co
img src="" で無駄リクエストが飛ぶ問題 - console.lealog();
どうなるかっていうのと、どうすればいいかっていうのをメモ。 古いAndroidの特定端末で起こったりするのですが、 このバグ、最近のブラウザではもう解消されてるのかしら？ コメントで頂きましたが、依然として起きるみたいです・・。 srcが空だと 以下のケース。 <img src=""> この場合、srcは勝手にそのページのルートへアクセスしてしまって、無駄なリクエストが発生していまいます。(いかなる状況でもそうなるわけではないみたいやけど) それを回避するには 調べてみた限り、以下の3パターンが多かったです。 //:0 <img src="//:0"> これはすごいなーと思いました。 参考：html - What's the valid way to include an image with no src? - Stack Overflow ただコレ、一部のAndroidで無理くり画像を
Version Control Guidance – Frequently Asked Questions - MSDN Blogs
In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...
Re: 音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて
Re: 音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて 2015年1月20日 著 音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて｜Web制作 W3Gを読んでの感想。文章中に「WAI-AREA」という誤記が何度か登場するの（正しくはもちろんWAI-ARIA）、いまだに修正されていないのはさておき（ [ 2015-01-20 追記 ] 既に修正していただけました）。 スクリーンリーダーや音声ブラウザなどの音声出力環境で::before擬似要素、::after擬似要素にcontentプロパティで生成した内容は多くのソフトウェアで読み上げることができます。使い方次第で、薬にも毒にもなりえます。 音声読み上げ環境は、あくまで多種多様にあるWeb閲覧環境のひとつでしかありません。
CSSのcanvasとviewportとposition:fixedとpinch zoom - saneyuki_s log
specを元にした概念の整理 間違いあったら教えて欲しい CSS 2.1におけるviewport CSS 2.1におけるviewportを説明するにあたり、以下のterminologyが必要となる canvas For instance, user agents rendering to a screen generally impose a minimum width and choose an initial width based on the dimensions of the viewport. viewport User agents for continuous media generally offer users a viewport (a window or other viewing area on the screen) through which users co
CSS4-Selectors | Browser CSS Selector Test
This browser selector test will check how well your browser supports the CSS selectors from level 1 up to the upcoming level 4. After you started the test-suit which is based on the working draft, it will automatically check which selectors are supported by your browser, not necessarily if your browser implemented it correctly according to the specification. Please note that the specification isn'
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モダン日本語フォント指定
Border
