reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート -sanitize.css
HTMLの各要素のブラウザごとに異なる差異をなくし、スタイルをリセットするスタイルシート「sanitize.css」を紹介します。 「Normalize.css」の共同開発者：Jonathan Nealの新しいプロジェクトで、最近の実装スタイルにあったアプローチがとられており、スマホなどのモバイルにも対応しています。 sanitize.css sanitize.css -GitHub sanitize.cssとは sanitize.cssの対応ブラウザ sanitize.cssのスタイル sanitize.cssの注目すべきスタイル sanitize.cssの適用 sanitize.cssとは sanitize.cssはHTMLのあらゆる要素を各ブラウザでの差異をなくし、整合性をもたせてレンダリングさせるスタイルシートで、ライセンスはCC 0で利用できます。 有用なデフォルトはそのまま 多
Firefox、プラグイン不使用に向けた対応強化 | マイナビニュース
掲載当初、「Firefox、プラグイン廃止へ」というタイトルの下、「プラグインを削除する方向で作業を進めている」と記述しておりましたが、誤りであったため修正いたしました。ご迷惑をおかけした読者の皆様ならびに関係各位に深くお詫び申し上げます。 Mozillaは「Mozilla Security Blog - Update on Plugin Activation」において、セキュリティ強化を目的として、Firefoxのプラグイン(メディアの再生などで必要になるソフトウェアの追加機能)不使用を強化する方向で作業を進めていることを伝えた。 Firefoxでは以前から対応を進めており、現在のバージョンではプラグインはデフォルトで無効。プラグインの使用が必要になるページを開くとプラグインを有効にするかどうかをたずねる「click-to-play」という機能が動作する仕組みになっている。記事ではWeb
)
Compatibility changes in IE11 (Windows)
With Internet Explorer 11, you get better compatibility with web standards, other browsers, and real-world websites. There's updated support for popular web standards and changes that prevent older websites from displaying incorrectly. These changes include: User-agent string changes Document mode changes Legacy API additions, changes, and removals URL character encoding Custom data attributes HTM
マイクロソフトがテストツール「BrowserSwarm」発表
テスト結果はInternet Explorer（IE）、Google Chrome、Firefox、Safari、OperaなどのWebブラウザのバージョンごとに合格率が表示される。テストに合格した項目と不合格だった項目は別々に参照でき、修正が必要な個所がすぐに分かるようになっている。 BrowserSwarmのプロジェクトは、jQueryライブラリの開発などに参加しているappendTo、クラウドベースのテスト用プラットフォームを提供するSauce Labs、マイクロソフトのInternet Explorer（IE）チームが協力して手掛けている。 IEチームは「質の高いフレームワークは現代のWebの基盤であるにもかかわらず、さまざまな端末やWebブラウザで横断的なテストができるリソースはあまり存在していなかった。BrowserSwarmでは相互運用性を備えたフレームワークの構築を支援する
IE8・IE9をクラッシュさせるシンプルなCSSコードが見つかる
わずか1行でInternet Explorerをクラッシュさせてしまうコードというものもありましたが、今回見つかったコードも、CSSに数行足すだけでInternet Explorer 8と9をクラッシュさせることが可能です。 Benutzer:Schinken/CSS-IE-Crash – Hackerspace Bamberg - Backspace http://www.hackerspace-bamberg.de/Benutzer:Schinken/CSS-IE-Crash デモページはこちら、IE8・IE9だとアクセスした瞬間にクラッシュし操作不可能になるので注意。 http://schinken.github.io/experiments/iecrash/crash.html 実際にIE8でアクセスしてみたところ、ページにアクセスしたとたんに一切の操作を受け付けなくなり、そのまま
各ブラウザに対応するCSSハックやJavaScriptによるハックをまとめているWebサイト・Browserhacks
各ブラウザのバージョンごとのCSSハックやJavaScriptによるハック方法をまとめているWebサイト・Browserhacksをご紹介します。CSSハックという言葉自体ちょっと懐かしい気がします・・・ CSSハックやJavaScriptによるハック方法をまとめたサイトです。IEはともかく、OperaやSafariのハックはちょっと助かるかも。 ブラウザ名で検索も出来る様になっています。IE、Firefox、Chrome、Safari、OperaなどのCSSハックやJavaScriptによるハック方法が掲載されています。 試してないけどMedia QueriesでIEのCSSハックという方法は思いつかなかったです。 デモページもあるのでハックが効いてるか確認する事も可能です。 Browserhacksにも書いてありますが、ハックは最適な解決法とは言えないので、個人のサイトなら別にいいと思
日本のブラウザシェア推移グラフ2015 （StatCounter Global Statsより）
「Microsoft vs Netscape」の第一次ブラウザ戦争は「Internet Explorer」の勝利で終焉し、いまや第二次ブラウザ戦争。はたしてブラウザの市場占有率（シェア）は？ アクセス解析サービス「StatCounter」（アイルランド）が提供する「StatCounter Global Stats」より日本のブラウザシェアの統計グラフを掲載。（グラフ表示はAdobe Flash Playerが必要。画像バージョン。） □ Source: StatCounter Global Stats - Browser Market Share （2014年9月1日～2015年9月1日） Microsoft Internet Explorer （Tridentエンジン） Mozilla Firefox （Geckoエンジン） Opera （Prestoエンジン ⇒ Blinkエンジン）
:before, :after擬似要素 の使い方を基本からマスターするためのチュートリアル | コリス
擬似要素はCSS1から存在するもので、ここで解説する「:before, :after擬似要素」はCSS2.1でリリースされたものです。 CSS1では「:first-letter, :first-line」です。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3ではコロンを二つにした「::before, ::after」などがあります。 サポートブラウザブラウザ 「:before, :after擬似要素」をサポートするブラウザは下記の通りです。 IE8+ Firefox3.5+ Chrome Safari4+ Opera6+ IE8+とすべてのモダンブラウザと言ってよいでしょう。 非サポートブラウザへの対応 IE7にも「:before, :after擬似要素」を利
IE7/8/9, 全てのモダンブラウザ、iPhone, iPad, Androidのクロスブラウザチェックができるソフトウェア -BrowseEmAll
デスクトップ・スマートフォン・タブレットの主要なブラウザの古いバージョンから最新版までに対応した、クロスブラウザのチェックに使えるWindows用のソフトウェアを紹介します。 Cross browser testing -BrowseEmAll [ad#ad-2] BrowseEmAllのサポートブラウザ BrowseEmAllの主な特徴 BrowseEmAllの使い方 BrowseEmAllのダウンロード BrowseEmAllのサポートブラウザ デスクトップ 主要ブラウザの最新版に対応。 IE7-9 Firefox3.6-12 Chrome12, 16, 19 Safari4, 5, 5.1 Opera10, 11 スマートフォン・タブレット 横置き・縦置きに対応。 iPhone, iPhone4, iPad, iPad2, iPad3 シミュレーター Android2.2, 2.3,
自分のサイトの表示を5種のブラウザでチェックできるネットサービス「browserling」
サイトのURLを入力すれば、わざわざ全種類・全バージョンのブラウザ環境をそろえることなく、、無料でバージョン別にInternet Explorer・Google Chrome・Firefox・Safari・Operaでの表示がチェックできるネットサービスが「browserling」です。操作方法は以下から。 browserling - interactive cross-browser testing https://browserling.com/ ◆操作方法 上記サイトにアクセスすると、このような画面が表示されます。 使い方は簡単、まず上部に「表示させたいサイトのURL」を入力します。今回はGoogle Chromeのバージョン14.0でサイト表示を確認したいので「Google Chromeのアイコン」・「14.0」の順に選択してから、「run」をクリック。 そうすると、以下のようにG
画像一枚だけで写真を重ねたようにするチュートリアル | コリス
シンプルなHTMLで画像を配置し、:before, :after疑似要素を使って、写真を重ねたようなエフェクトにするチュートリアルを紹介します。 重ねたエフェクトはホバー時にCSS3アニメーションします。 デモページ ※ホバー時のアニメーションはFirefoxのみです。 実装 HTML HTMLは非常にシンプルです。 ラッパーのdiv要素はWebkit系ブラウザ用で、将来無しでも機能するようになるかもしれません。 <div class="stack"> <img src="image1.jpg" /> </div> [ad#ad-2] CSS スタイルシートは4つのデモのキャプチャと共に、紹介します。 まずは、右端の写真が垂直方向に重なっただけのスタイルシートです。重なりは:before, :afterを使用します。 .stack { position: relative; z-index
レスポンシブなデザインにするなら知っておきたい。各ブラウザの小数点以下のピクセル値の扱い
デザイン要素を固定しないリキッドレイアウトは、未知の端末にも対応するというコンセプトのもとに実装するレスポンシブウェブデザインには必須だと考えています。そのリキッドレイアウトを実装する際に理解しておきたいのが、パーセント値で幅や高さを指定した際に小数点以下になるピクセル値（10.5pxとか9.2pxなど）に対するブラウザの挙動です。 たとえばグリッドシステムを構築する際、計算上はあっているのにブラウザでは思った通りに表示されないといったことが起こります。これは、各ブラウザのサブピクセル（小数点以下のピクセル値）の扱いの挙動差により生まれます。 まずはパーセント指定の基本から まずは前提となるパーセント指定の際の計算の基本のおさらいから。。。 CSSでパーセント値を使って幅や高さ指定をすると、指定した要素を含む親要素をベースにピクセル値が計算されます。 たとえば100pxの親要素の中にある子
サイト内にクールにビデオやオーディオを設置できる「Yahoo! WebPlayer 」 | Web活メモ帳
米Yahoo! が埋め込み式のメディアプレイヤー Yahoo! WebPlayerを公開しました。かっこ良いのと使い勝手が良さそうだったのとで、いつか使うかもしれないメモ的エントリーです。 このライブラリを使用する事で、mp3へのリンクやYoutube、動画へのリンクがページ内でかっこ良く再生してくれます。 さらにページ内のリンクを自動で拾ってプライリストにしてくれたりもします。 ↑再生してみた様子 対応ブラウザにはIE6も含まれているようですね。 使い方 使い方は簡単で、以下のスクリプトタグを</body>の直前に挿入すればOKです。 <script type="text/javascript" src="http://webplayer.yahooapis.com/player-beta.js"></script> お手軽ですね:) 興味のある方は下のリンクからどうぞ〜。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
IDEA * IDEA
新着記事