Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and

HttpWatch is an HTTP viewer and debugger that integrates with IE and Firefox to provide seamless HTTP and HTTPS monitoring without leaving the browser window. Four Tips for Setting up HTTP File Downloads - HttpWatch BlogにおいてHTTPサーバでファイルのダウンロードを提供する場合の設定の4つのポイントが紹介されている。アーカイバでまとめられたファイルはそのままでダウンロードできることが多いが、テキストファイルなどブラウザがそのまま表示できるファイルや、プラグインがインストールされビューアが用意されている場合には個別のファイルとしてはダウンロードされずにブラウザで閲覧がはじま

SitePoint: New Articles, Fresh Thinking for Web Developers and Designers HTMLやCSSを記述する際にもっとも気になるのが、使おうとしている機能が開発に使っている以外のブラウザでサポートされているかどうか、また、意図どおりに機能するかどうかだ。テストフェーズでまとめてチェックする方法もあるが、複数のバージョンが混在する現状では、テストフェーズまでチェックを引き伸ばせば引き伸ばすほど、後からブラウザ互換性を確保する作業が困難なものになる。 開発段階でブラウザごとの互換性やサポート状況をチェックしリスクを回避するために役に立つリファレンスマニュアルにSitePointが提供しているSitePointリファレンスシリーズがある。CSS、HTML、JavaScript版が提供されており、特にCSSとHTMLのリファレンスマニ

Make Tech Easier - Uncomplicating the complicated, making life easier WebサイトやWebページ、WebアプリケーションにとってCSSはデザインを実現する中核技術となっている。このCSSを最適化する3つのツールが3 Useful Tools To Optimize your Blog’s CSS - Make Tech Easierにおいて紹介されている。紹介記事そのものはブログで利用されるCSSを取り出して最適化するストーリーになっているが、汎用的なテクニックとして利用できる。紹介されているテクニックとツールは次のとおり。 CSSファイル編集テクニック CSSはHTML内部に記述するのではなく外部ファイルにまとめる 属性に繰り返し同じ設定を記載するのではなく、クラスとして定義して利用するようにする。たとえば複数のクラス

Google ChromeでデバッグをおこなうWebデベロッパに朗報だ。Chromeの開発者向けツールに、待望のJavaScriptのフル機能デバッガ「Scripts」とサンプルベースの「Profile」が実装された。Devチャンネル(開発版)限定の同機能だが、なにはともあれ一足お先にその新機能をチェックしてみよう。 より強力になったGoogle Chromeのデバッガとは Google Japan Blogは2日(日本時間)、Google Chromeの開発者向けツールとして「Scripts」と「Profiles」タブが追加されたことを発表した。Google Chromeを使用しているWebデベロッパは同機能を使用することで、より強力なJavaScriptデバッギングとプロファイラを簡単に使用できるようになる。 今回あたらしく実装された「Scripts」と「Profiles」タブはDev

My DebugBar | IETester / HomePage via CodeZine IE 5.5 ～ IE8 までの複数バージョンの IE を１代のPCで表示可能な 「IETester」 が IE8 に正式対応したとのことです。 ■関連エントリー 複数バージョンの IE を表示可能な「IETester」が IE 8 RC1 に対応したらしい 1台のPCで複数バージョンのIEを動かす「IETester」を試してみました

Yahoo! JAPAN Tech Blog Yahoo! JAPANは27日、Yahoo!ニュースをリニューアルした。従来よりも高速にページが表示されるように改善が施された。従来は3秒から5秒ほどかかることもあった表示時間を1秒以内のレスポンスタイム実現を目指して各種最適化が実施されたと説明されている。 どういった最適化が実施されたのかがYahoo! JAPAN Tech Blog Yahoo!ニュース高速化へのサイトデザイン側からのアプローチで説明されている。サイトデザイン側の高速化アプローチとしておもに次の技術を活用したという。 CSS Spriteの採用 PNG8の採用 Optpix WebDesignerを使いPNG8の減色処理を実施 Smush.itを活用しPNG8の余分なチャンクを削除 興味深いのは、これらテクニックはYahoo!のエンジニアでありYSlowの開発者、Stoy

SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Craig Buckler氏がSitePointにThe 5 Most Under-Used HTML Tagsというおもしろい内容の記事を公開している。HTMLには数十の要素があるわけだが、divやspanで代用して適切な要素を使わないことがあるという内容だ。紹介されている使われない要素は次のとおり。 label要素 - form内の可視フィールドにはlabelを使うべき。for属性でフィールドIDと関連付け、title属性で追加情報を付与する fieldset要素/legend要素 - form内はfieldsetでグループ化する。fieldsetのキャプションタイトルはlegendで与える optgroup要素 - selectとoptio

My DebugBar | IETester / HomePage via CodeZine 複数バージョンの IE を 1 台の PC で表示させることのできる「IETester」が、IE8 RC1 版に対応したとのこと。これで、IE 5.5 ～ IE 8 RC1 版まで表示可能になりました。 これはありがたいですね。 ■関連エントリー 1台のPCで複数バージョンのIEを動かす「IETester」を試してみました

jQuery 1.3が登場! jQueryはPrototype.jsと並んで最もポピュラーなJavaScriptライブラリの1つで、DOMの要素や属性に対する操作をメソッドチェーンで流れるように記述できるのが特徴だ。最近では日本語での情報も増えており、Webアプリケーションの開発で利用しているという開発者も多いのではないだろうか。 2009年1月、jQueryの最新のメジャーリリースとなる1.3がリリースされた。新たなCSSセレクタエンジンSizzleの導入やリファクタリングによる処理の高速化など、メジャーリリースに相応しい内容となっている。本稿ではjQuery 1.3での主な変更点や新機能を紹介する。 大幅な高速化を実現 jQuery 1.3は1.2系と比べ、大幅な高速化が実現されている。CSSセレクタエンジンがより高速なSizzleに置き換えられているほか、要素の追加やoffset()

DebugBarの動作例 - DebugBarサイトから抜粋 Webアプリケーション開発に必須のツールといえばFirefoxとそのエクステンションFirebugだ。その機能は驚くべきものがあり、もはやFirebugなくてはWebアプリケーション開発はできないと考えるデベロッパやデザイナは少なくない。 エクステンションが豊富に用意されているFirefoxだが、ほかのWebブラウザでも似たような機能を提供するものがある。ここでは先日新しいバージョンが公開されたDebugBarを紹介したい。DebugBarはIEを対象として開発されたツールで、Firebugの機能をIEでも実現することを目指している。 今回公開されたバージョン(5.0 beta 1)では新しくDOMタブが追加されている。DOMツリー上のノードが選択されると、Source/Style/Comp.Style/Layout/Attrs

利用者にメッセージを分かりやすく伝えるJavaScriptライブラリ「Window.Growl 2.0」 2007年07月10日- Window.Growl 2.0 利用者にメッセージを分かりやすく伝えるJavaScriptライブラリ「Window.Growl 2.0」 「Window.Growl」を使えば、クリックするとフェードイン表示し、数秒後に消える、というようなメッセージボックスを簡単に実装できます。 実装コードは次のように超シンプル。 Growl.Smoke({ title: 'Window.Growl By Daniel Mota&apos', text: 'http://icebeat.bitacoras.com', image: 'growl.jpg', duration: 2 }); これはなかなか使えそうですね。 ライブラリには、mootoolsフレームワークを使用して

Inspiration Package: 60 Usable & Elegant Designs We all love beautiful, usable and impressive web designs. 60の使える＆エレガントなウェブデザイン。SmashingMagazineより。 31Three North x East Youtilize.com Oaktree Creative CodeIgniter WebRevolutionary Pop Labs nPanorama.ru 続きを見る 最近のウェブデザインはやはり、「Web2.0風」がトレンドのようですね。 読みやすく、シンプルにまとまっていてどのサイトも参考になりそうなサイトばかりです。 関連エントリ WEBデザインの際に使える５０のソース 2007年3月、クリーンかつ印象的なデザインサイト集 PhotoShopで

10 different styles of Accordion’s (Using Ajax, JavaScript, DHTML…)at Developer Snippets Hi developers here I am back again with some useful stuff. I had a thought of how to represent lot of stuff in a constant space area in a webpage 伸縮するアコーディオン風UI実装ライブラリ集。 YourHead Accordion Ext Accordion MooTools Menu Accordion Example with Mootools Accordion Example Accordion Demo 伸び縮みするので少ないスペースで実装することが出来、なめら

Thank you, Firebug. You made the web amazing for all! The story of Firefox and Firebug are synonymous with the rise of the web. We fought the good fight and changed how developers inspect HTML and debug JS in the browser. Firebug ushered the Web 2.0 era. Today, the work pioneered by the Firebug community through the last 12 years lives on in Firefox Developer Tools. Switch to the latest version of

米Microsoft Corporationは9日（現地時間）、Webページの構造を検証できるIE用プラグイン「Internet Explorer Developer Toolbar」の正式版を無償公開した。Windows XP/Server 2003/Vista上のIE6/7に対応し、現在同社のダウンロードセンターからダウンロードできる。 「Internet Explorer Developer Toolbar」は、IEのエクスプローラバーとして動作するWeb制作者向けのプラグイン。ローカルまたはインターネット上のWebページのHTML/CSS構文を解析でき、レイアウトや色合いの調整、W3Cの文法チェックサービスを利用した構文エラーチェックなど、アクセシビリティに配慮したWebページ作成に便利な機能が多数搭載されている。 エクスプローラバーはWebブラウザー画面の下側へ表示され、上部に各