ミニマルなモーダルライブラリをnpmで公開しました
ミニマルなモーダルライブラリ(MinimalModal.js)を自作してみたので紹介します。 MinimalModal.js とは 🤔 TypeScript で作成された、軽量かつ最小限の機能のモーダルライブラリです。 なんでこのライブラリ作ったの？ 🤔 Micromodal.jsを使おうと思ったのですが、 背景スクロール無効がなかったり、IE 未対応といったところが私の用途には合わなかったため、 いっそのこと作ってしまったほうが早いかなと考え、作ってみました。 機能 😋 モーダル用エレメントの open 属性の有無、及び aria-hidden の true/false の切り替え (開閉のアニメーションは CSS で実装) 背景をクリックまたは ESC キー押下でモーダルを閉じる。 (HTML の実装次第で背景クリックでも閉じないようにできる) タブキーのフォーカス移動でモーダル
【css】IEと戦うためのTips集 - Qiita
おはこんばんちは、ゆるすぎて投稿を忘れていたちーずです。(反省) 本日は、IEと戦うためのTipsを、IE滅びろという気持ちを抑えて書きます。 なぜこの記事を書く？ 新卒として働き初めてから、新規立ち上げサイトのCSS設計を担当させていただいた経験がありましたが、 その中で一番失敗したこと、反省したことがIE対応だったからです。 自戒の念を込めて、この記事を書こうと思いました。 基本的なIE対応 まずはじめに、基本的なIE対応をする際に考えるべきことをざっくりと説明します。 1. Can I use でプロパティがIEに対応しているかを調べる Can I useとは、HTMLやCSSなどのブラウザ対応状況が調べられるサービスです。 自分が使用したいプロパティがIEに対応しているかを簡単に調べることができるため、ブラウザ対応しているか不安なプロパティを使う際は必ず調べましょう。 緑 : 対
Macでも無料でIE確認するためのModern.IEが想像以上に快適だった
これまで、MacBook Air 上で制作したWebページを IE 確認する時は、「VirtualBox」や「Parallels Desktop」という仮想PCアプリケーション上で Windows 8 などを起動し、そこで IE を起動して表示確認しています。 私は、 Windows XP – IE8 Windows 7 – IE9 Windows 8 – IE10 のように、なるべく一般的なOSとブラウザーのバージョンで合わせて個別の仮想PCをインストールしていますので、実機で確認するのと比べてもほとんど遜色のない精度でIEでの表示確認をすることができています。 その際、「Windows 8 – IE10」環境は、パフォーマンスが良いと聞いて購入した「Parallels Desktop 7」という仮想PCアプリケーションを使用していました。 しかし、OS X を Mavericks（10
Version Control Guidance – Frequently Asked Questions - MSDN Blogs
In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...
IEが有るから助かってるって思えるかもしれないお話
何かしらのサイトを組んでいる時って誰でも一度は思うんだろうけど、 「IEなんて・・・（自重」、「IEさえ・・・（自重」、「ちょ、IEおま・・・（自重」 とか、思うっすよね。 ボクも勿論その中の一人で、特にIE6に関しては常に思ったりしています。 IEのために今までどれだけの時間を費やしたか・・・と思えるほどに。 そんなIEさんですが、今日は逆にIEが有るから助かってるかもって思えるお話です。 ぇーまぁそんな訳で、明日からIEが一切なくなったとして。 「3番目のグローバルナビだけちょっと指定変えてもらえる？」 と、言われて、 『class追加するのやだなぁ』 ってのが、 「リンク先変わらないんだから属性セレクタ使えばいけるっしょ」 って言われてしまったり。 「そこの最初のh3だけmargin-topは0で、他のh3は30pxでお願い」 と、言われて、 『最初のh3だけclass追加しないとい
Microsoft、高速化したWebブラウザ「IE8」の正式版を公開
3月18日(現地時間) 発表 米Microsoftは18日(現地時間)、Webブラウザ「Internet Explorer 8」(以下IE8)の正式版を、米国東部標準時間の19日12時(日本では20日午前)より提供開始すると発表した。英語版のみならず、日本語版を含む各国語版が公開される。 IE8では、HTMLパーサーやCSSルールプロセッシングなどの性能を向上させており、表示速度の高速化を図った。同社によるベンチマークの結果、世界でもっとも人気のあるトップ25のWebサイトのうち12サイトにおいて、ほかのWebブラウザより高速に表示できたという。また、Firefoxと比較して3倍、Chromeと比較して3割多いサイトで最速の表示を実現したという。 また、W3Cが定めるCSS 2.1標準に対して、市場にあるいずれのWebブラウザよりも多くのテストケースに合格しているという。一方で、IE7から
IE6についての考え方(2009/01版）
FirefoxやSafari,Chromeが出てきた現状、プロのWeb屋の中では、Internet Explorerだけの対応をもとめられて面倒くさい！と思うことは多々あります。 ただ、半分冗談で「IEクソ」と思う人と、本気で「IEクソ」と思ってる人の両方が存在している可能性があるので、IT系特有のネガティブな教育のせいで後者に洗脳されてしまってる人がもしいたら、そういう人に送りたいエントリー。誰向けかというと、主に対象は実装屋さんなのかな。 知っておいて欲しい事は 「IEがあったからこそ、今、僕等はメシを食えているかもしれない」 ということ。 そして、 「僕等の本当のお客様は、IEを使い続けているし、これからも使い続ける可能性が高い人たち。お客様がブラウザの種類などを意識せずともインターネットにアクセスしてもらえる環境を維持することが、プロのWeb屋の使命である。」 ということ。 過去、
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ | Blog hamashun.com
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph
onclick 属性問題について - IT戦記
本気でやるならonclick属性は避けてライブラリを活用すべき - 帰ってきたHolyGrailとHoryGrailの区別がつかない日記 に関して この先、 HTML に onclick と書いても石を投げられないように書いておく＞＜ 僕も onclick 属性がダメだと思っていた時代もありました。でも、今は時々使うなあ。 （あ、でも、 HTML と JS で分業している場合は、使わないほうがいいよね＾＾；そこだけは言っておく。） JavaScript 入門の記事を書くときに onclick 属性がダメだとしたら、いろいろ本質的でないことを説明しなきゃいけない。 現状では onclick 属性が、もっとも簡単に HTML にイベントをマッピングできる方法だから、そんなに目くじらたてなくてもいいんじゃないかなあ？ たとえば 以下は、クリック時に href に GET を送るための oncli
[CSS]IE6でよく遭遇する6つのバグとその解決方法 | コリス
CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ <textarea name="code" class="css" cols="60" rows="5"> div#box{ width:100px; border:2px solid black; padding:10px; } </textarea>
[PHPプロ!] IEでAjaxリクエストをキャッシュさせない方法：CodeZine
Jaslabsにて、IEでAjaxリクエストをキャッシュさせない方法が掲載されています。 IEの場合Ajaxを用いた通信を行うと、GETメソッドの場合一度実行されるとデータがキャッシュされて、2回目以降の通信はそのキャッシュされたデータを読みに行くようになってしまいます。 そこでJaslabsでは、その対策として2つの策を提示しています。1つめは、GETメソッドを辞めてPOSTメソッドを使う方法です。POSTメソッドの場合、GETメソッドと異なりこちらは2回目以降の通信でもキャッシュされることなくサーバのデータを取得します。 2つめの策は、GETメソッドで取得する先のURLにユニークIDを付加する方法です。下記のようにここではユニークIDとしてタイムスタンプを付加しています。 var date = new Date(); var timestamp = date.getTime()
Vista（64bitも）で動く、IETesterを入れてみた
待ってました。心底待ってました。 本気で待ってました！ Vistaの64bitでもIE6とかがチェック出来ちゃう素敵なアプリを！ IETesterのサイト これ一つで、IE5.5、IE6、IE7、IE8 beta1 の確認が出来てしまうんです。 インストール方法もとても簡単で、Download IETester v0.2 を押してダウンロードして実行。 後は、OK押して進んでいけば完了！ 基本的なレンダリングチェックには問題ないっぽいですが、まだアルファ版なので、ちょこちょこバグがあるっぽいです。 リサイズした時に内容が消えてしまう時がある ( 次バーションで修正予定 ) Previous/Next のボタンが動作しない Focus が動作しない まぁすぐに修正されるんじゃないでしょうか。 続きは、IETesterの使ってみての簡単な感想と、雑記です。 IETesterを使ってみて とりあ
古いブラウザで透過PNGを表示させるJavascriptの比較検証
取り上げるのは下の3つ。便宜的に上からapng、alphafilter、ie6pngとする。 IT戦記 - 僕も半透明 png を使うためのライブラリ作った！ アルファ画像を扱うalphafilter.jsライブラリ-とあるWEBクリエイターのblog ウノウラボ Unoh Labs: IE6でアルファチャンネルを含むPNGを表示する apng特長外部ライブラリ不要実行に遅延なし萌えポイントコードの文体がいかにもプロっぽいグローバル領域を侵さない"if lte IE6とかもできるよ"って言ってるところ好みがわかれるところ対象PNGの直後にscriptロードするだけで使える / 何度もロードしなきゃいけないのが嫌びみょうなところimgにwidthとheightを指定しなきゃいけない（詳細不明）簡単カスタマイズelmScript.src.replaceのとこをいじって好きなファイル名（/bla
[CSS]IEで、min-widthやmax-widthを実現する方法
CSS-Tricksで、IE用に「expression」を使用して、min-width、max-widthを実現する方法がエントリーされていました。 The Perfect Fluid Width Layout デモページでは、最小幅780pxを維持しつつ、最大幅1280px以上になると残りの箇所は背景画像が表示されるようになっています(参照：キャプチャ画像)。 min-width、max-widthの箇所は、下記のように記述されています。 #page-wrap{ background: white; min-width: 780px; max-width: 1260px; margin: 10px auto; width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 12
min-width,max-width,min-height,max-heightをIEで使えるようにするjavascript[to-R]
min-width,max-width,min-height,max-heightをIEで使えるようにするjavascript minmax.jsはIE6以下でmin-width,max-width, min-height , max-heightのプロパティを利用可能にするjsライブラリになります。 CSS2では以下のプロパティが定義されているがIE6には実装されていない。 max-width - 要素の横幅の最大値を指定する min-width - 要素の横幅の最小値を指定する max-height - 要素の高さの最大値を指定する min-height - 要素の高さの最小値を指定する minmax.jsはこれらのプロパティを利用可能にするjsライブラリです。 設置方法 設置方法はダウンロードしたminmax.jsをhead要素内などで読み込むだけです。 <script type="
![min-width,max-width,min-height,max-heightをIEで使えるようにするjavascript[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
ウノウラボ Unoh Labs: hasLayoutとは何か
yamaokaです。 CSSに携わっている方なら、Holly hackを使ったことがあるかもしれません。 /* Hides from IE5-Mac \*/ * html .foo { height: 1%; } /* */ Internet Explorer（以下IE）で、レイアウトに問題のある要素に 上記のようなスタイルを指定をすると、 あら不思議、まともな表示がなされるというものです （上記のままではIE7に対応していませんが…）。 さて、どうしてレイアウトが意図したとおりに行われるようになるのでしょうか。 IEのhasLayoutプロパティ IEでは、全ての要素が 「hasLayout」という読み取り専用のプロパティを持っています。 これはそれぞれの要素がレイアウト情報（＝要素の幅・高さなどに関する属性情報）を 保持しているかどうかを示す値で、 デフォルトの状態では「hasLayo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://hpbuilder.net/weblog/2009/01/25135938.html