いまどきのCSS - font-family ゴシック編｜masakihongo｜note
CSS の「font-family」の指定に関しては、検索すると2017年版とか2018年版とかたくさん出てきますが、なんとなくコピペではなく、自分で納得がいくように調べてみました。 結論から言うと、「なかなか難しい」です。 適度に見直しが必要だと感じました。 ポイントとしては ・游ゴシックかすれる問題 ・ヒラギノ太い問題 があります。 とりあえず今っぽい感じにするならば Windows 日本語：游ゴシック 英語：Segoe UI Mac 日本語：游ゴシック 英語：San francisco font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', YuGothic, 'Yu Gothic Medium', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN
IE11でもobject-fitを使う一番簡単な方法
CSSのobject-fitプロパティって便利ですよねぇ。 画像を並べるページではもうほとんどコレに頼り切りで、このプロパティがないなんて考えられないくらいです。 がしかし、この便利なobject-fitさん、IE11は対応してないんですよね…。 そもそもobject-fitって何？ 例えば、下記のような縦長写真と横長写真が混在する場合、普通に並べるとこんなふうにデコボコになりますよね。 幅200pxで揃えたら上下にデコボコになりますし、 高さ200pxで揃えると大きさが不揃いになりますし、 幅200px 高さ200pxを指定すると被写体が歪んでしまいます。 左のワンちゃんは潰れていますし、右のワンちゃんは細長くなっちゃいましたよね？ これを解決してくれるのが object-fit:cover; です。 こんなふうに指定した範囲内で画像をトリミングして表示してくれるんですね。 ■objec
MacでVirtualBoxを使って無料のIE11検証環境を作成 - 電気クジラの夢を見る
macで、IE11 の検証環境を無料で作成する方法 VirtualBox をインストール 説明は省略 Microsoftの仮想マシンをダウンロード https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/ 今回は、Virutual machine に、IE11 on Win7 (x86) Select platform に、VirtualBox を選択 仮想マシン環境作成 ダウンロードして、zipを展開すると vmdk と、ovf ファイルが作成されるので ovf ファイルをダブルクリックで開く VirtualBox が開くので、そのまま設定（設定変更は後でも可） 仮想Windows環境の設定 このままでも使えますが、ウィンドウサイズの変更などのため VirtualBox Guest Additions をインストール
僕が遭遇したIE11固有の不具合とその対策 - Qiita
最近大学時代の同期と飲んだらMSに転職したので 現在から過去の案件で産廃IEくたばれと心底思った発生した事象と対策を書いていきます 他にもこんなことあったぜ！って意見ありましたらお待ちしております。 キャッシュ Windows10のIE11で遭遇した事象 ログイン→ログアウト→別アカウントログイン したときの挙動が最初のログインアカウントの状態のレスポンスが返ってくる Authorization: Bearerヘッダーが再ログインしても前のBearerトークンが残り続ける APIレスポンスが前回のものが返ってくる 対策 JSのすごい人に助けてもらいました・・・ ClearAuthenticationCacheを無効にする リクエストキャッシュしないようにリクエストパラメータ末尾に日付をつける→jQueryでもこの方法で回避しているらしい これIEのバグですよね？ // ClearAuthe
IE11のバグまとめ - Qiita
バージョンごとに進化するIEのバグ 備忘録も兼ねて記事にまとめました。 バグについての解決策と補足も併せて記載してますが、 記事に記載されていない遭遇率高めのバグやより良い解決策などがあれば、是非フィードバックをお願いします。 まとめてみた所感としては、IE6の頃から根本的な部分は変わってない気がします。 （ただし、パフォーマンスが大幅にアップしたのは認める。） IE11はWindows10の場合、2025年までサポートが続きます。 https://support.microsoft.com/ja-jp/lifecycle/search/18165 ﾅﾝﾃ／(^o^)＼＼(^o^)／／(^o^)＼＼(^o^)／／(^o^)＼ｺｯﾀｲ もうね...アボカドまるごとバナナかと。 ちなみに今年の4月でVistaがサポート終了するので、1ヶ月後にはIE9を窓から放り投げてOKです。 https:/
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
（追記あり）Internet Explorer 8、9、10、来週でお別れです
（追記あり）Internet Explorer 8、9、10、来週でお別れです2016.01.07 11:00 そうこ さようなら。 使っている人は要注意。来週12日で、マイクロソフトが、Internet Explorer 8、9、10のサポートを終了します。今後、これらのバージョンへのアップデートはなし（セキュリティアップデート含む）。Internet Explorer 11（Windows 7、 Windows 8.1、 Windows 10上）へのサポートは、今のところ、継続されます。しかしIEユーザーのみなさま、そろそろ本格的にEdgeへの乗り換え時ですよ。 IE 8, 9, 10お疲れさまでした。テクノロジー系へのさよならは、｢また会う日まで｣や｢新境地でもがんばれ｣と言えないところが、さらに寂しいところです。 追記： 12日以降サポートが継続されるのは、各OS最新版のIEです。
IEなんて怖くない！冷静にバグを叩き潰すための11のヒント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 コーディングを始めてはや1年。今でこそ、そこそこできるようになってきた僕ですが、初めの頃はそれはもう悲惨なものでした。 あるときはIEのバグで先輩に助けを求め、またあるときはIEのバグで先輩に助けを求め、そしてまたあるときはIEのバグで先輩に助けを求め・・・。 そんな時代に、CSSハックを使わず、極力自力でバグをつぶすために、僕は先輩の助言を元に「バグで詰まったらまず目を通す11のヒント」なるものをノートにリスト化して書きとめておいたのでした。 バグったらとりあえずこの項目に目を通す。するとGoogle先生に頼らずともなんとかなるようになりました。 今でこそもう使わずともよくなりましたが、コーディングに不慣れな方は、このようなリストを作っておくといいかもしれません。 参考程度に以下、ご覧になってみてくだ
ちょっと未来のJavaScript - Thujikun blog
本エントリは JavaScript Advent Calendar 201314日目となります。 来年遂にXPが逝去されるということで、IE9以降のシェアが飛躍的に伸びることを祈りつつ、IE9以降でJavaScriptでできるようになることを気がつく限りまとめてみました。 DOM addEventListener / removeEventListener イベントを登録/削除するためのメソッド。IE8まではattachEventとdetachEventという似たような、でも割と細かいところで動きが違うメソッドを使う必要があったが、IE9から標準のaddEventListenerがサポートされている。 ※ jQueryのon/offとかbind/unbindとだいたい同じ。 ※ 第3引数はuseCaptureといって、trueにするとイベント伝播を上位のDOMから発生させることができる。ま
You Might Not Need jQuery
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more tha
JavaScript初級者が調べるInternet Explorer特有の仕様いろいろ
JavaScript ( != jQuery ) を勉強してます 最近、jQueryからJavaScriptに改宗を企てています。node.jsとかTitaniumとかやってみたいので、JavaScriptとして勉強し直しです。ブラウザやDOMのことを省いたらシンプルな言語ですし、柔軟で楽しい言語ですよね。 さて、業務でその取り組みを強行しようとしたところ、案の定Internet Explorer特有の仕様に悩まされたので、簡単なところで違いをまとめてみました。 Internet Explorerのことを教えていただいたり var elm = evt.target || evt.srcElement;も RT: @ahomu var evt = e || window.event;Thu Jan 27 06:19:29 via webYoshiaki Sugimoto sugimoto19
IEの持つ互換性機能の全て - DOCTYPEスイッチ/X-UA-Compatible/互換表示 - ふろしき Blog
IEはかつて、独自の機能実装により安定かつ高度な機能を持ったプラットフォームを実現しました。特に、IE6のポテンシャルの高さは、Web技術発展へ大きく貢献しています。 しかし同時に、他のブラウザとは異なる独立した挙動をしたり、バージョンごとに機能面に開きがあるなど、相互運用性の面に大きな課題を作ってしまいました。多くの企業は、IEの特定のバージョンへ強く依存した既存資産と、IEのアップグレード方法に頭を悩ませているでしょう。 Microsoftはこの問題に対応するため、IEは過去のバージョン向けに開発されたWebコンテンツを動作させるための仕組みを持っています。これを「ドキュメントモード」といいます。 本記事では、IEの持つドキュメントモードを利用した互換性の考え方について解説します。IEのアップグレード時に、移行方法の指針、手段の発見に活用して頂ければ幸いです。 ★ 目次 DOCTYPE
IE6/IE7/IE8/IE9の共存まとめ
Windows 7やWindows VISTAでIE6/IE7/IE8/IE9を共存させる方法です。IE9はまだベータ段階ですが、周辺ツールも対応してきた頃なのでまとめてみました。 公式ブラウザの共存はできませんが、以下に示す方法で各バージョンの表示を確認することができます。最近はIETesterが主流になってきたようなので、そこを踏まえてます。 IETesterを利用＋IETesterでIE9を確認できるようにカスタマイズする 「Microsoft Expression Web SuperPreview for Windows Internet Explorer」と「Internet Explorer Platform Preview（「Internet Explorer 9 Platform Preview」）」を併用する IE9のブラウザーモードとドキュメントモードを利用する 以下、
IE8以下を切り捨てれば使える便利なCSSプロパティー＆セレクター
2016年2月1日 CSS Webサイトを制作するにあたって、Internet Explorerのどのバージョンに対応させるかは、制作を始める前に話し合っておいた方がいい問題点のひとつです。私の場合2013年に入ってからはIE6やIE7に対応させる機会は皆無となり、IE8・IE9に対応させるかを議論しているところですが、皆さんはいかがでしょうか？今回はもしIE8を切り捨てる（IE9〜のサポート）なら使える便利なプロパティーやセレクターを紹介します。-ms-filter で対応できるものもありますが、filter の説明は割愛します :P ↑私が10年以上利用している会計ソフト！ IE8のシェア StatCounter Global Statsの調査によると、日本のブラウザバージョン別シェア（2013年10月）はIE10が30.78%で1位、Chromeが17.79%で2位、IE8は10.7
そのコード、本当にjQueryが必要ですか？ネイティブ関数の代替Tips集 | ゆっくりと…
sitepoint から「本当にjQueryが必要ですか？」とタイトルのついた3本の記事を紹介します。 Do You Really Need jQuery? Native JavaScript Equivalents of jQuery Methods: the DOM and Forms Native JavaScript Equivalents of jQuery Methods: Events, Ajax and Utilities 言うまでもなく著者の Craig Buckler さん の趣旨は、「jQueryを使うのは止めよう」ではありません。ネイティブ関数で代替えできるのは、古い IE のサポートが必要なく、ごく簡単なケースに限られます。その代わりに得るものは「速さ」です。そこで、どの程度「速い」のかを所々 jsperf の結果で補ってみたいと思います。 また JavaScri
IE11 でユーザエージェント文字列から 「MSIE」 が消えた件
IE11 になって機能追加やレンダリングエンジン周りの進化もかなりありましたが、それとあわせてユーザエージェント文字列が大幅に変更されました。 先月末に Windows 8.1 のプレビュー版が公開され、早速手持ちの MacBook Pro に入れてみたっていう話は先日書いたとおりですが、Internet Explorer 11 （IE11） については細かく触れなかったのでまとめておこうと思います。 IE11 になって機能追加やレンダリングエンジン周りの進化もかなりありましたが、それとあわせてユーザエージェント文字列が大幅に変更された結果、従来のブラウザ判別コードで検出できなくなる可能性もあったりします。その辺について Nicholas C. Zakas 氏が Blog 記事を上げていたので紹介しつつ触れてみたいと思います。 とりあえず、IE11 の概要とか 公式情報として、IEBlog
【保存版】IEのバージョンを判別し、バージョンごとにスタイルを適用する3つの方法 | DX.univ
エンジニアの菊池です。 今回、初めてブログを投稿させていただ[...]エンジニアの菊池です。 今回、初めてブログを投稿させていただくことになりました。 業務では主にフロントエンドの実装とマークアップ等を担当しています。 さて、Windows XPのサポート終了まで残り約8ヶ月となりました。 ようやく長くにわたり苦しめられてきたIE6から解放されることになりますが、でも実はIE7、8、9もIE6ほどではないまでもバグや独自解釈が多かったりします。 そんな時にはCSSハック等の手法やJavascriptを利用してIEだけ特別な処理やスタイルを適用したりします。 ということで今回かなり今更感はありますが、自分用の備考録も兼ねてIE6〜10のバージョン別CSSハックと条件付きコメント分岐、jQueryによるIEバージョン判別の3つの方法についてまとめてみました。 1.CSSハック /* I
Webサイトの作り方のまとめ！ブラウザチェック。
サンプルサイト制作を通して「Webサイト制作」についてまとめてます。 前回の記事で、トップページのコーディングがひと通り完了したので、下層ページのコーディングに移る前に、一旦ブラウザチェックしてみようと思います:)。 以下は目次です。クリックすると各項目へ移動します。 対象ブラウザ。 ブラウザの種類 ブラウザのバージョン ブラウザの進化 チェックすべきブラウザ ブラウザチェック。 ブラウザチェックツール BrowserStackを使ったブラウザチェック VMware＋IETesterでブラウザチェック Internet Explorerでバージョン別チェック チェック結果 表示の崩れを整える。 IE8での表示を整える IE7での表示を整える IE6での表示を整える モダンブラウザと同じくらいまで整える。 transitionの動きをjsで実装する IE8以下でも:last-childとか使
Compass + PIEでIEにもCSSで背景にグラデーション
CSS3で追加された gradient をIEでも使ってみたいの巻。 【グラデーション】 IE 9 IE 9はHTML5 & CSS3に対応したモダンなブラウザです（噂では）。 CSS3 gradientへの対応はちょっと？？？な感じです。 Compassでグラデーション設定だと… Compass @import "compass/css3"; .gradient { @include background(linear-gradient(top, #fcfcfc, #cccccc)); } .gradient { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fcfcfc), color-stop(100%, #cccccc)); background: -webkit-linear-grad
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Browser Testing On The Most Reliable Platform | BrowserStack
