CodePen - Front End Developer Playground & Code Editor in the BrowserBuild, share, and learn JavaScript, CSS, and HTML with our online code editor. Discover web applications and hire talent from the world’s largest community of front end developers and designers.
スクリプトが無効の場合のスタイル
たとえばホームページのビジュアル要素など、いったん非表示にしておいてスクリプトでふわっとフェードインさせたい、みたいなことはよくある。そのとき非表示にする操作も JavaScript にやらせると一瞬見えてしまうことがあるので CSS で非表示化したいが、それだとスクリプトが無効の場合に何も表示されなくなってしまう… というような、スクリプトによる操作を前提にしたスタイルのフォールバックをどうするかという問題。 ここのところよく使っていたのは、JavaScript で html 要素の class 属性を操作し、それをもとに CSS を書くという手。Modernizr でも使われてるあれ。 (function () { var root = document.documentElement; root.className = root.className.replace(/\bno[-_]
CSSのセレクタ部分にハイフン(-)を使うべきか
えんじに🐈にゃーん🍓🫐🍅🌽🍈🍇🦝 @uupaa (ε・◇・)з だらだら書いたよー http://t.co/fK9KaHRq 「CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー」 2012-01-22 01:37:32
scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…
Yslow ルールでは、スクリプトはページの最後尾、つまり </body> 直前に置け、と言っています。なぜなら、スクリプトの読み込みや実行により、他のページ要素の読み込みやレンダリングがブロックされてしまうからです。 一方、古くは IE4 の時代から Microsoft はこの問題に対処するため、defer 属性という独自の解決策を実装してきました。これは HTML 4.01、XHTML 1.0、1.1 で仕様として採用され、HTML5 にも発展する形で引き継がれています。 IE 以外のブラウザも既に対応されており、IE の独自仕様という色合いが濃かった従来と異なり、これからは広く利用されていくのではないかと思います。 下のビデオは、スクリプトの位置と defer 属性のあり／なしによる、ページの読み込み／表示速度の違いを Pagetest.com でテストしてみたもので、明らかな差異が
Togetter - 「scriptタグ内をHTMLコメントで括ってからJavaScript書くのって意味あるの?」
@monjudoh scriptタグ内を<!-- // -->で括ってからJavaScript書くのってどの辺のブラウザ向けにやってるんだっけ? #javascript 2010-07-28 11:31:45
第8回 実践DOMスクリプティング#1：HTMLとテキストの操作 | gihyo.jp
こんにちは、太田です。前々回、前回でDOMの基礎を簡単に解説しました。今回からは、DOMを使った実用的なスクリプトを解説していきます。特に今回はHTMLの操作、テキストの操作にフォーカスを当てていくつかのサンプルコードを解説していきます。 HTML操作の基本 JavaScriptによってHTMLを書き出したり、一部を書き換えたり、削除したりといった方法は実は様々な方法が用意されています。目的に合わせて適切な方法を選ばないと非効率だったり、最悪クロスサイトスクリプティングなどの問題を抱えてしまう危険もあります。 document.writeと同期読み込み JavaScriptでHTMLを書き出すというと、最初に学ぶのはこのdocument.writeかもしれません。いわゆるprint文のようにシンプルなAPIなので、入門書の最初のサンプルなどで扱われることも多いようです。しかし、docume
HTMLDocument の動的な作成: Days on the Moon
ブラウザ上で、JavaScript を使って HTML のソースから HTML 文書を生成するのに、どんな方法があるのか調べました。なお、以下のスクリプトは HTML 文書上で実行することが前提です。 表の見方 XSLT の HTML 出力 createHTMLDocument メソッド createDocument メソッド createDocument メソッドと名前空間の指定 createDocument メソッドと文書型宣言の指定 createDocument メソッドと文書型宣言及び名前空間の指定 cloneNode メソッド iframe 要素 ActiveXObject CID からの作成 まとめ 表の見方 以下の表において、各項目の意味は次の通りです。 doc HTML 文書を作成できれば○、XML 文書を作成できれば△、それ以外なら×です。HTML 文書かどうかは、cre
文書構造と動的なWebのアクセシビリティ | Web標準Blog | ミツエーリンクス
Mozillaでアクセシビリティ関連のQAを担当しているMarco Zeheが自身のBlogに “The importance of placement of HTML elements in a document” という記事を投稿していました。JavaScriptでモーダルダイアログなどを実現するものがありますが、実装方法によってアクセシビリティを著しく損ねることになるケースが紹介されています。 記事で例に挙げられていたのはThickBox。デモの写真やリンクをクリックするとダイアログが開くのですが、これは新たに生成したdivを文書の一番後ろに追加し、それをスタイルシートで調整するという実装が行われています。 表示上はなんら問題ない方法ですが、Zeheはこの「文書の一番後ろに追加する」ことに問題があると述べています。文書の最後に要素を追加してしまうと、内容の多いページにおいてはアンカー
教科書に載らないWebアプリケーションセキュリティ 第1回 ［これはひどい］IEの引用符の解釈 − ＠IT
XSSにCSRFにSQLインジェクションにディレクトリトラバーサル……Webアプリケーションのプログラマが知っておくべき脆弱性はいっぱいあります。そこで本連載では、そのようなメジャーなもの“以外”も掘り下げていきます（編集部） 小さな話題が面白い 皆さん、はじめまして。はせがわようすけと申します。 「教科書に載らないWebアプリケーションセキュリティ」ということで、Webアプリケーションのセキュリティに関連する、普段あまり見掛けないような小さな話題を取り上げていきたいと思います。 セキュアなWebアプリケーションを実現するために、開発者の方だけでなく、Webアプリケーションの脆弱性検査を行う方々にも読んでいただきたいと思っています。重箱の隅を楊枝でほじくるような小さな話題ばかりですが、皆さんよろしくお願いします。 さて第1回は、Internet ExplorerがHTMLを解釈する際の引用
検索フォームにヘルプ表示するJavaScript - ラシウラ
そこで作ったのが下記です。どうでしょうか？ http://techblog.yahoo.co.jp/cat207/how_to/javascript/ が汚いコードだというのと、表示のためだけにinputのvalueに入れるのもどうかと思ったので、CSSでその表示を後ろに出すようにし、操作するコードを書いてみました。 CSSでinputの後ろに文字列を表示 画像を使うのが手っ取り早いけど、CSSで重ねて表示する方法をとります。その方法もいろいろあるが、以下では、inline-blockとマイナスのmarginを利用する方法を使っています*1。 <span style="display:inline-block;"> <div id="info" style=' line-height: 25px; margin-bottom: -25px; text-indent: 0.2em; colo
Graceful DegradationとProgressive Enhancementの実践 | Web標準Blog | ミツエーリンクス
Chris Heilmanによる“Graceful degradation versus progressive enhancement”という記事について、前回は概要とその意義について紹介しました。今回は後半にあるの例をもとに、どのように実践していくのかを考えてみたいと思います。 「印刷する」というリンク オンラインショッピングの決済画面には、印刷して手元に保管したいというニーズがあるからか「印刷する」といったリンクやボタンが設けられています。クリックしたときに印刷用ページが現れるものもありますが、記事では印刷ダイアログが現れる簡単なものを取り上げています。 このようなリンクは、JavaScriptにより実現されています。 <p id="printthis"> <a href="javascript:windowprint()">Print this page</a> </p> しかしな
フォームコントロールのデフォルト値: Days on the Moon
WebKit のコントロール値キャッシュ対策 「日本野望の会－Yabooo.org > Safari/Webkitのおせっかいキャッシュとその対策。」にコメントしたはずなのですが、いつの間にかコメントが消えているようなので推敲の上再掲。 上記のページで問題にしているのは、Safari において bfcache を無効にしていても、動的に追加したフォームコントロールの値がキャッシュされた値に書き換えられてしまうことです。これに対し、文書中のコントロールをすべて記憶し、文書のアンロード時にそれらの名前 (name 属性の値) を変更することで解決を図っています。 しかし、書き換えられるのは一時的な値のみで、コントロールのデフォルト値 (フォームをリセットしたときに設定される値) まで変化するわけではありません。ならば、コントロールが文書中に挿入されたときに、その値をデフォルト値に設定してやれば
『DOM Scripting 標準ガイドブック』を読んだ - blog.8-p.info
まえに人におすすめされて少しだけ借りて読んだ DOM Scripting: Web Design with JavaScript and the Document Object Model という本があって、それの日本語訳の『DOM Scripting 標準ガイドブック』が売っていたので買って読んだ。初版が2007年6月なので、最近出た本じゃないです。 文法まわりは微妙 2章の JavaScript の文法に対する記述はあんまりうなづけないところがある。変数名が snake_case なのは趣味の問題だけどたぶん lowerCamelCase のほうが多数派。 配列を var beatles = Array("ジョン", "ポール", "ジョージ", "リンゴ"); とするほうが [] より「良い」(p.33) とも思えないし、連想配列がほしいときに {} じゃなくて var lennon
Ext.useShims - IT戦記
EXTJS の Ext.useShims についてのメモ select 要素 や flash が z-index 無視して飛び出すを押さえるためにレイヤーの下に iframe を挟む手法を on にするか off にするかのプロパティ。 Shim EXT JS では、この iframe のレイヤーを Shim というみたい。あっちこっちに shim って言葉が出てくる。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Learn web development | web.dev