ブラウザで表示が崩れた時の検証に便利！IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハック -Browser Hack Mixins
特定のブラウザで挙動がおかしい、期待通りにならない、そんな時の検証用に役立つ、IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハックがまとめられたSassのMixinを紹介します。 いざという時に、備えておきたいですね。 Browser Hack Mixins for Sass Browser Hack Mixinsの使い方 「_hacks.scss」をインポート。 コード: @import "hacks"; Mixinの使い方 基本書式: @include [Mixin_Name]{ selector, property, value } 記述例: @include only_ie9_below { .my_div, background-color, red } CSSハックの各ブラウザは、下記の通り。 そのブラウザのみ、バージョンのみ、
Web制作における対応ブラウザの選定方法
Web制作における対応ブラウザの選定方法 「フロントエンドのテクニカルディレクションに求められるスキル」で出てきた話題として対応ブラウザの選定方法について掘り下げて解説を行います。 サイトのターゲット・予算・リソース・開発期間などビジネスにより選定方法は異なりますので、あくまで参考程度にしてください。 対応ブラウザを絞る意味 まず最初は「なぜ、対応ブラウザを絞るのか」という視点から。 理想論で言ってしまえばWebサイトを訪れるユーザー全てに最適なコンテンツを提供できれば申し分がありません。 しかし、現実的には各ブラウザ/OSによって実装が異なる機能があったり、実装されていない機能があったり、特有のバグを含んでいる物があったりすることもあり、そういった場合は個別のブラウザ/OSに対してデバッグやチューニングを行わなくてはいけません。 そのため対応ブラウザの数が多ければ多いほど、Webサイトの
HTML の a 要素に target=”_blank” をつけるのはもうやめよう
HTML の a 要素に target 属性をつけて、リンク先の文書をどこで開くのかを指定できますね。 デフォルトは _self で、元のドキュメントと同じフレーム。無指定だとこれになるので、わざわざこれを書くことは少ないと思うけど。 一番よく使うのは target="_blank" じゃないでしょうか。リンク先のドキュメントを新しいタブやウィンドウで開くやつですね。 これ、以前はよくつかってました。ルールとして サイト内リンクは target 指定なし 外部サイトへのリンクは target="_blank" というのが多かったんじゃないかな。 でも最近、これはもうリンク先がどこであろうと指定しない方がいいんじゃないか、と思ってます。 もちろんサイトによってそれぞれ使いわけはあると思うんだけど、少なくともほとんどの手元のサイトの場合はいらない。 target="_blank" を使ってきた
Webページをブラウザから印刷する際に、最適化するためのCSSのフレームワーク -Hartija
Hartija CSS Print Framework -GitHub Hartijaではページ全体、見出しやテキスト、画像、リンク、テーブルを印刷用にスタイル定義し、印刷時には非表示にさせる要素を定義します。以前紹介した時に比べCSS3/HTML5対応でいろいろなスタイルが増えています。 Hartijaの使い方 Hartijaの「print.css」を外部ファイルとして加えるだけです。 「media="print"」の指定は忘れないように。 <link rel="stylesheet" href="print.css" type="text/css" media="print"> 印刷用のスタイル：ページ全体 背景は無し、文字色はブラックに指定されています。 フォントの指定は英語がベースなので、日本語環境で利用する場合には「font-family」「font-size」を変更した方がいい
さらば、IE…一般ユーザー向けには消える可能性も
20年の歴史に幕か？ すでにWindows 10向けには、新たな｢Spartan｣ブラウザの開発が進められていることが明らかにされています。そうなると、これまでマイクロソフトが一貫して提供し続けてきたInternet Explorer（IE）の今後も気になるところですよね。 このほどマイクロソフトが開催した｢Microsoft Convergence｣カンファレンスにおいて、マーケティングチーフを務めるChris Capossela氏は、懸念されていたIEの展望について発言。早ければWindows 10より、一般ユーザー向けには姿を消す可能性もあることが示唆されていますよ！ Windows 10に搭載されるブラウザに関して、どのようなブランドで、どんなネーミングがふさわしいかの調査を進めている。今後もしばらくは、Internet Explorerは残るだろう。だが、新しいブラウザには｢Pr
いま使っているブラウザの情報を教えてくれるサイト「yourbrowser.is」 | ライフハッカー・ジャパン
フォームローラーでほぐし続けた結果...ようやくわかった効果とメリット3つ #Amazonプライムデー
さよなら、IE…新ブラウザSpartanがWindows 10に搭載か
さよなら、IE…新ブラウザSpartanがWindows 10に搭載か2014.12.30 09:30 湯木進悟 完全に生まれ変われるか！ Windowsユーザにとっては、標準ブラウザのIE（Internet Explorer）こそがメインのブラウザという方も日本国内では少なくないようですけど、他のChromeやFirefoxと比較すると、IEには不満なポイントも多いみたいですね。それを当のマイクロソフトも承知の上で、大幅にレベルアップした次期IEの開発に期待もかかっていましたが……。 このほどZDNetが伝えた情報によれば、新たなWindows 10には、予想されていた｢IE 12｣ではなく、まったく新しいブラウザ｢Spartan｣が搭載されることになるようですよ。Spartanは、IEと同じレンダリングエンジンおよびJavaScript を採用しているものの、より軽量化されたブラウザに
実は2014年に終結していた？--ブラウザ戦争の現状をおさらい
現代のブラウザ戦争が本格的に始まったのは2004年のことだ。Mozillaの「Firefox」が2004年、「Internet Explorer」（IE）の完全かつ絶対的な市場支配に戦いを挑み、それから5年足らずでユーザー数を0人から数億人に伸ばすことに成功した。 Googleも2008年、「Google Chrome」ブラウザを発表して、それに続いた。Chromeは2012年にはFirefoxに追いついた。 この戦いは2014年に遂に終結したのかもしれない。 この10年間で多くのことが変わった。現在、モバイルデバイスの台数は従来のPCを上回っており、デスクトップブラウザの重要度はモバイルウェブクライアントやアプリに大きく劣るようになってしまった。現在の主要なプレーヤーは、Appleのモバイル版「Safari」とGoogleのChromeだ。Mozillaは大きな過渡期を迎えており、Mic
[JS]フォームのさまざまなエレメントを異なるブラウザ・スクリーンで同じように美しく表示させるスクリプト -Formplate
デモ：Safari/OS Xで表示 フォームの見た目はどのブラウザでも美しく表示されていました。スクリーンサイズを変更しても同様に美しく表示されます。 Formplateの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsとModernizrを外部ファイルとして記述します。 <head> // Required javascript <script src="js/min/jquery-v1.10.2.min.js"></script> <script src="js/min/modernizr-custom-v2.7.1.min.js"></script> // Formplate <script src="js/min/formplate.min.js"></script> <link href="css/formplate.css" rel="st
![[JS]フォームのさまざまなエレメントを異なるブラウザ・スクリーンで同じように美しく表示させるスクリプト -Formplate](https://cdn-ak-scissors.b.st-hatena.com/image/square/9ed9261b41e9377fcfcb1f225aa1aa691a91afdd/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112605.png)
Private Presentation
Private content!This content has been marked as private by the uploader.
Microsoft が IE のサポート ライフサイクル変更を発表、IE8 は 2016年1月にサポート終了
上記の表は 「Stay up-to-date with Internet Explorer ： IEBlog」 から引用。 ということで、あと 1年半くらいですが、2016年の 1月時点で正式なサポートを受けて利用できる IE としては、IE9 が最も古いバージョンとなり、IE8 以前はサポート対象外となりますね。 ちなみに、組み込み機器向けの Windows OS である 「Windows Embedded」 に関しては OS 自体のサポートサイクルが異なりますので、ここでの話とは少し異なりますけども。 この辺のより詳しい情報は、下記、Microsoft 社のプロダクト サポート ライフサイクルの IE に関するページを確認してください。IE のサポートについては、サポート ライフサイクル ポリシーに関する FAQ が参考になります。 マイクロソフト プロダクト サポート ライフサイクル
[WordPress] 大きなモニターを使っているなら試してみるべき真のリアルタイムプレビュー！「Active Preview」 * prasm（プラズム）
[WordPress] 大きなモニターを使っているなら試してみるべき真のリアルタイムプレビュー！「Active Preview」 著者：シンタロヲフレッシュ Graphic Designer / cinematographer. 「prasm（プラズム、って読みます）」は週末だけが楽しいWeekenderではなく、1週間7日間、自分のしっくりを追い求め、日々をアップデートし続けるそんな“Weeker”に献げるブログです。 しっくりくるモノ・コトが好きなシンタロヲフレッシュがあなたの明日をしっくりさせるべく、しっくりにまつわるアレコレを書いていきます。 より詳しくプロフィールは「about」へ。
![[WordPress] 大きなモニターを使っているなら試してみるべき真のリアルタイムプレビュー！「Active Preview」 * prasm（プラズム）](https://cdn-ak-scissors.b.st-hatena.com/image/square/6158eb789934e1f74b75e1ab8e9ddeef909ceab7/height=288;version=1;width=512/https%3A%2F%2Fprasm.blog%2Fwp-content%2Fuploads%2F2014%2F02%2F2014-2-20-0041.png)
ユーザー激論！ Chrome対Firefox、より優れたブラウザはどっち？ | ライフハッカー・ジャパン
かつてはそれほど重要視されていなかったウェブブラウザですが、今や私たちの生活の欠かせない一部となっています。単にシステムのデフォルトを使っていたのは昔の話、今はオペレーティングシステムと同じように、ブラウザにも熱狂的なファンが生まれています。 米Lifehackerでは、その中でも特に人気の高い「Chrome」と「Firefox」を取り上げ、「どちらがより優れたブラウザなのか？」という疑問に対するさまざまな意見を集めていましたのでご紹介します。 洗練されたChromeと、カスタマイズ機能が豊富なFirefox Googleは、Chromeの外観を整え、ほかのブラウザよりも洗練された使い心地にするために多くの労力を費やしてきました。そのかいあって、Chromeでは特別な設定をしなくても便利に使うことができます。一方Firefoxは、その外観と操作方法を自在に変更できる機能の多さで知られていま
IEの古いバージョンをサポートしつつ、モダンブラウザ用のサイトを制作する時の20のアドバイス
Microsoft公式のIEのデベロッパサイト「modern.IE」から、古いブラウザをサポートしつつモダンブラウザ用のサイトを制作する時に役立つアドバイスをクロスブラウザの観点や、HTML, CSS, JavaScriptの実装時ごとに紹介します。 20 tips for building modern sites while supporting old versions of IE 下記は、各ポイントを意訳したものです。 クロスブラウザ HTML CSS JavaScript クロスブラウザ ウェブサイトはすべてのブラウザで同じように見える必要はありません。 例えば、最新のブラウザではよりリッチなUIを提供し、古いブラウザではソリッドに機能させます。 開発をシンプルにするために、堅実なテンプレートを利用しましょう。 動作が安定しているスタンダードにフォーカスを合わせて制作する。 スタ
Chromeの機能拡張 -Responsive Inspector | コリス
レスポンシブの確認ツールの多くは単にブラウザのサイズを変更して確認するだけですが、レスポンシブがスタイルシートで定義されているかに基づいてページの確認ができるChromeの機能拡張を紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
いまさらだけど、マイクロソフトのウワサのブラウザ「Edge」についてまとめてみた
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
ブラウザにやさしいHTML/CSS
スマホ用のブラウザ判別を行うための「 jquery.browser.sp.js 」
地図で見る、国別最も使われているブラウザ
