[JS]便利で簡単！スクリプトやスタイルシートをブラウザ・OSごとに分岐して利用できる超軽量高速のスクリプト -Conditionizr
IE6/7/8/9/10, Firefox, Chrome, Safari, Operaなどのブラウザだけでなく、Win, Mac LinuxなどのOS、iPadやiPhoneのRetinaディスプレイ用に条件分岐して、外部スクリプトやスタイルシートをロードさせたり、classを付与してHTMLで利用できたりする超軽量高速の単体で動作するスクリプトを紹介します。 Conditionizr Conditionizrの特徴 Conditionizrの使い方 Conditionizrの特徴 ConditionizrはjQueryより50%高速に動作し、条件付きのJavaScriptとCSSをサポートする3KBの超軽量スクリプトです。 条件付きのHTMLタグ 条件付きの外部スクリプトやスタイルシートのロード カスタマイズされたスクリプトにも対応 IE, Firefox, Chrome, Safar
[JS]ブラウザとそのバージョンだけでなくOSもデバイスもスクリーンサイズも判定し、CSSのセレクタで利用できる便利なスクリプト -CSS Browser Selector+
IE6/7/8/9, Firefox, Chrome, Safari, Operaは当たり前、Win, Mac, LinuxなどのOS、iPhone, Android, iPod, iPadなどのデバイス、スクリーンのサイズ、言語などを判定し、それらをCSSのセレクタで利用できるスタンドアローンのスクリプトを紹介します。 CSS Browser Selector+ CSS Browser Selector+の特徴 CSS Browser Selector+の使い方 CSS Browser Selector+の特徴 CSS Browser Selector+はハック無しで、さまざまなUAをCSSのセレクタで指定できるスクリプトです。ブラウザごとに異なるスタイルシートの適用、スマフォやタブレット用のレスポンシブなスタイルにも利用できます。 CSS Browser Selector+が判別するの
JavaScriptとCSSファイルのHTTPリクエストを最小限にし圧縮・キャッシュする -BoxJSとBoxCSS
ウェブサイトで使用する複数のJavaScriptとCSSファイルのHTTPリクエストを少なくし、圧縮・キャッシュするサービスを紹介します。 [ad#ad-2] 複数のJSファイルをまとめる -BoxJS 複数のCSSファイルをまとめる -BoxCSS 複数のJSファイルをまとめる -BoxJS BoxJSは一つのJSファイル（box.js）を利用し、モジュール式のローディングシステムで複数のJSファイルをロードできます。 BoxJS BoxJSの使い方 最初に、box.js(1.4kb)を外部ファイルとして指定します。 <script src="http://www.boxjs.com/box.js"></script> ロードするJSファイルを指定します。 Box('http://mywebsite.com/scripts/', [ 'plugins/jquery.js', 'plugi
IE6〜8でCSS3セレクタ利用「Selectivizr」
CSS3セレクタを使う上で問題となるのはやはりIEです。HTML5 & CSS3 Supportで確認すると、IE6～8はほとんど対応できていないことが分かります。 そんなIEでもCSS3セレクタを使えるようにするのがSelectivizr.jsです。詳しく紹介されているサイトがあまりなかったのでご紹介。 Selectivizrの設置方法 ここで提供されているselectivizr.jsとJavaScriptライブラリを外部ファイルで読み込むだけで、CSS3セレクタがIE6～8でも利用可能となります。コードも外部ファイルを読み込むだけですのでとてもシンプルです。 <script type="text/javascript" src="[JSライブラリ]"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascr
レガシーなブラウザでもCSS3の新技術を活用する·Selectivizr MOONGIFT
SelectivizrはCSS3の機能をIE6〜8でもサポートできるようにするライブラリ。 SelectivizrはJavaScript製のオープンソース・ソフトウェア。CSS3ではIDやclassによる指定の他にもセレクタが追加されている。例えば属性値による指定でスタイルを設定することもできる。機能が追加されれば、より自由度の高いWebデザインができるようになる。 使い方 しかし足を引っ張る要素も存在する。それがレガシーブラウザだ。CSS3に対応していないWebブラウザであるIE6〜8においてセレクタを使えるようにするのがSelectivizrだ。 SelectivizrをIE6〜8において読み込めば、多様なセレクタが利用できるようになる。面白いのはjQuery、dojo、prototype.js、YUI、DOM Assistant、MooTools、NWMatcherといった有名なJa
Whatever:hover
Hi there! This script is from 2003, and targets a flaw in IE6, which at its peak was a really popuplar browser. Today (oct 2011) it no longer is, and as such this script should not really be necessary anymore. Please try to convice your client, project manager or boss, that not every browser needs to display a website the exact same way; it is the content that matters. And if you really still need
ウインドウサイズによって読み込むCSSを自動で切り替えてくれる「Adapt.js」 | Web活メモ帳
ウインドウサイズによって横幅やカラム数を変更したい。 そんな時につかえるのが「Adapt.js」。 ブラウザの横幅をチェックして、読み込むCSSを切り替えてくれるJavaScriptライブラリだ。 使い方 ウインドウサイズと、読み込むCSSを指定するだけでOKです。 例えば、760px以下と、980px以下、1280以下でCSSを切り替える場合には、 以下のように指定します。 ・・・ range: [ '760px = mobile.css', '760px to 980px = 720.css', '980px to 1280px = 960.css', '1280px = fluid.css' ] ・・・ 最近はウインドウサイズに合わせて幅や高さをフレキシブルに広げる手法がたくさん使われているので、こういったライブラリを覚えておくと良さそうだ。
[JS]ハイライトのエリアをマウスに合わせて移動させるスクリプト
Google Chromeのタブのように、繊細なハイライトのエリアをマウスに合わせて移動させるスクリプトを紹介します。 タブの実装 まずは、タブの実装から。 タブの実装はシンプルです。 HTML タブはリスト要素で実装します。 <ul class="nav clearfix"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="active"><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul> CSS CSSもシンプルに実装します。 .nav { list-style: none; border-bottom: 1px solid #a0a0a0; padding: 10px 10px 0 10px; } .
もうCSSハックは必要なし!? ブラウザ毎にCSSを切り替える「cssuseragent」 | Web活メモ帳
CSSでページをデザインする際に、ブラウザ毎のレイアウトの違いって本当に嫌ですよね。 CSSハックで対応する方も多いかと思いますが、本日紹介する「cssuseragent」を使うとclassの作り方を少し工夫するだけでより柔軟に対応できるようになります。 詳しくは以下 設定方法はJavaScriptを一つ読み込むだけになります。 <script src="cssua.min.js" type="text/javascript"></script> このライブラリを使うと、ページのhtml属性に動的にclass属性を追加するようになります。 例えばですが、IE6でアクセスした場合には ua-ie-6というclass名が追加されるようになります。 <html class="ua-ie-6"> <head>…</head> <body>…</body> </html> iPhoneの場合はua-
[JS]JS/CSSの管理、ユーザー環境の検出など便利な機能がつまった超軽量スクリプト -Head JS
複数のJSファイルの管理、CSSのサポートが異なるブラウザへの対応、ブラウザとバージョンの自動検出、スクリーンサイズの自動検出など、headで制御したい便利な機能がつまった超軽量（2.3KB）スクリプトを紹介します。 Head JS [ad#ad-2] 下記に、Head JSでできることを簡単に説明します。 詳しい使い方は下記ページで解説されています。 Usage: Head JS 外部JSファイルの読み込み JavaScriptの管理 CSSのサポートが異なるブラウザへの対応 HTML5非対応ブラウザへの対応 スクリーンサイズに合わせた表示 Dynamic CSS CSSを特定のページのみに CSSをブラウザごとに指定 外部JSファイルの読み込み 通常、複数のJavaScriptファイルを外部ファイルとして読み込ませるとブロッキングが生じます。 そのブロッキング解消し複数のファイルを並列
uuAltCSS.js - README
uuAltCSS.js は Webページデザイン を簡単にする JavaScript ライブラリです。 独自のアプローチで、ブラウザ と CSS を切り離し、 古いブラウザでも最新の CSS の仕様に基づいたデザインを可能にします。 また、WebKit系ブラウザでしか利用できないはずの最先端の機能を、様々なブラウザで利用可能にします。 Features - 特徴 CSS3 Selector ready - CSS3 セレクタによる Webページデザインが可能になります。 No! CSS Hack - CSS Hack は一切使えません。 ブラウザ毎のレンダリングの違いはコンディショナルセレクタでスマートに解決できます。 Include cutting-edge technologies - 未来の技術を先取り。豪華なオマケ付きです。 Acid2 Safe - u
CSS3 Compatibility Tools, Resources and References for IE
Resources by Application Bootstrap Templates Figma Templates Flyer Templates Illustrator Templates InDesign Templates Lightroom Presets Logo Templates Logo Fonts Mockup Templates Photoshop Actions Photoshop Brushes Resume Templates Tailwind CSS UI Kits Web Templates Video & Motion Design Templates All Motion Design After Effects Apple Motion DaVinci Resolve Final Cut Pro Premiere Pro Presentation
CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」:phpspot開発日誌
Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8 CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 便利なCSS3の擬似クラスがIEでも使えて効率的なスタイリングが可能になります。 jQuery, prototype, mootools等と同時に使うことができ、 使えるプロパティはライブラリごとに違うようで、サイト上にそれぞれ掲載されています。 完璧ではないようですが、便利なものが多く使えるということで、活用してみてもいいかもしれませんね。 関連エントリ 便利なCSS3ツール6つ＋α IE6-8でもCSS3が使えるようになる「CSS3 PIE」 ピュアCSS3で3Dアニメーション IE6-8でもCSS3に対応するライブラリまとめ
[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3
<textarea name="code" class="css" cols="60" rows="5"> .box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ box-shadow: 10px 10px 20
Thickboxで表示したコンテンツだけを印刷するテクニック！
[mixi] jQuery.js | しつもん 162 Thickboxで表示したコンテンツだけを印刷できるようにするテクニックというのはあるのでしょうか？ [mixi] jQuery.js | しつもん 162 Thickboxで表示させた部分だけ印刷できるようになんてできるんだろうか・・・？なんて思ったけど、印刷ボタンつけてそこであれこれしたらできそうだなーなんて思ったので実践！！ Thickbox部分のみ印刷できるようにする 早速実践！ ※とりあえずブラウザでのプレビュー確認報告。Firefox3.6、IE7、IE8は大丈夫な様子。ChromeはデモのThickbox表示がおかしい状況･･･Opera微妙？ ■デモ 上記の画像表示中は、その部分のみが印刷される（ハズ）です。 尚、今回の内容はFirefox3.6で動作確認済み。他ブラウザ、時間の関係で未確認です＞＜ カスタマイズ箇所
JavaScriptでCSSのプロパティを削除する(IEでfilterがあるとClearTypeが無効になるバグ対策) « Beyond Perspective Solutions 公式ブログ
javascriptからCSSを変更したい場合は、 //生 var node = document.getElementById('hoge'); node.style.marginLeft = '10px'; //dojo dojo.style(dojo.byId('hoge'), 'marginLeft', '10px'); といった感じになります。 しかしこれだと、CSSのプロパティ自体を削除することはできません。 普段はそんな必要も無いのですが、IEにはfilterプロパティの付いた要素のその子要素でフォントのアンチエイリアス(ClearType)が効かなくなるというバグがあるので、filterプロパティ自体を削除したいことがあります。 node.styleで取得できるオブジェクトはCSSStyleDeclarationで、これにはremoveProperty()というメソッドがあ
IEにおいてfilter:alpha(opacity)を設定しても、currentStyle.hasLayout=falseだとが透明にならない。 - Enjoy*Study
IEで不透明度を変更するために下記のようなコードを書いたのですが、対象のエレメントのスタイルによって、不透明度が変わらない場合があることに気がつきました。(IE6、7共に) element.style.filter = 'alpha(opacity=50)';だめだったのは、div要素に対して background-colorだけを指定したもので、これに対してwidthまたはheightを追加指定すると、ちゃんと不透明度が効いてきます。 なお、JavaScriptではなくcss上でfilterの指定を行っても同様でした。(width,heigthがないと効かない) script.aculo.us(v1.7.0)ではどうしているんだろうと、ソース(effects.js)を眺めてみたところ、Element.setOpacityでは特に考慮しているような処理は見当たりませんでした。(その先のpr
旧・Macの手書き説明書 - FC2 BLOG パスワード認証
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
IE6でhover,active,focus擬似要素を使う為の「csshover」
IE6でhover,active,focus擬似要素を使う為の「csshover」 Check Tweet 配布元：whatever:hover ライセンス：LGPL IE6はa要素以外は:hoverや：active、：focusなどのダイナミック擬似クラスに対応していません。それを解決するのがcsshoverというJavaScriptライブラリです。 csshoverの使い方 配布元よりcsshoverの.htcファイルをダウンロードします。:hover と :activeに対応した1.4系、1.4系に:focusを追加した2.0系がありますので、利用したい擬似クラスに合わせてダウンロードしてきてください。 ダウンロードしたファイルはスタイルシート内でbody要素に対して読み込みます。 body{ behavior:url("csshover2.htc"); } .htcファイルのパスは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
