The async and defer attributes for the <script> element have great support now, so it’s time to learn exactly what they do! <script> Let’s start by defining what <script> without any attributes does. The HTML file will be parsed until the script file is hit, at that point parsing will stop and a request will be made to fetch the file (if it’s external). The script will then be executed before pars
By Ilya Grigorik on May 20, 2014 Synchronous scripts are bad because they force the browser to block DOM construction, fetch the script, and execute it before the browser can continue processing the rest of the page. This, of course, should not be news, and is the reason why we have been evangelizing the use of asynchronous scripts. Here is the canonical example: <!-- BAD: blocking external script
こんにちは、エンジニアの荒井です。 2016年はAMP（Accelerated Mobile Pages）の正式サポートがアナウンスされ、導入した方も多いのではないでしょうか。VASILYでもAMPを導入し数ヶ月運用しています。AMPの導入に関しては、関連記事も多く存在しますが、導入したことによって得られた結果について触れている記事は少ないと感じています。そこで本記事では、弊社でのAMP導入事例と、AMPによって得られた効果を紹介したいと思います。これから導入を検討している方はAMP対応による効果の一例として、すでに導入している方は比較対象として参考にして頂ければと思います。 AMPについて 初めにAMPについて簡単に説明します。 AMPはモバイルページを高速にユーザー届けるために発足したプロジェクトです。昨年Googleの検索結果に表示されるようになり、様々なサービスで対応が進められてい
Creating forms in HTML has always been complicated. You first need to write the correct markup, then you need to make sure each field has a valid value before submitting, and finally you need to inform the user when there is a problem. Thankfully, new features were introduced in HTML5 to make this a lot easier. In particular, the form controls were extended to support constraints, allowing the bro
形式 <p>～</p> サポート LS / H2 / e2 / Ch1 / Fx1 / Sa1 / Op1 / i1 カテゴリ フローコンテンツ パルパブルコンテンツ 親要素 フローコンテンツ を子要素に持てるもの 子要素 フレージングコンテンツ タグの省略 開始タグ: 必須 終了タグ: 本要素の直後に address, article, aside, blockquote, details, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup(HTML Living Standard), hr, main, menu, nav, ol, p, pre, section, table, ul 要素が続く場合、もしくは、親要素に対してこれ以上の要素が無く、かつ、
定期的に「なぜブラウザのフォームは PUT / DELETE をサポートしないのか？」を調べてははっきりとした収穫無く、また途中までの足取りをちゃんと残さず忘れる。どっかにズバッと理由や背景が書かれたリソースってあるのかな？
要素がフォーカスされるとき、ドキュメントが受けるキーイベントのターゲットはその要素でなければいけません。フォーカスされた要素がないかもしれません。もしないときは、ドキュメントが受けるキーイベントのターゲットは、body 要素があれば、それでなければいけません。なければ、Document のルート要素があれば、それでなければいけません。ルート要素もなければ、キーイベントは発出されてはいけません。 ユーザーエージェントは、ブラウジングコンテキストか Document ごとに、フォーカスを追跡することができます。または、トップレベル・ブラウジングコンテキストごとにフォーカス要素を一つだけサポートしても構いません。その際には、ユーザーエージェントは、プラットフォームの慣例に従うべきです。 トップレベル・ブラウジングコンテキストの中のどの要素がその時点でフォーカスを持つのかについては、そのトップレベ
link要素のrel="canonical"について調べてみました。 以下、主にGoogleの「rel="canonical" 属性について」の記載を引用しながら、FAQ形式で書いていますが、認識誤りがありましたらどこかでつぶやいてください。 １．利用目的は？ 「検索エンジンのインデックス内での重複コンテンツ問題」解消のためです。 下の図で示すURLは、同じページにアクセスしているにもかかわらず、検索エンジンでは別のURLとしてインデックスされます。 検索エンジンのインデックス内での重複コンテンツ問題 link要素の「rel="canonical"」を利用することで、URLの正規化が行われ、重複コンテンツ問題を解消します。 解消イメージ 2009年2月、Google、Yahoo!、Microosftの大手検索エンジン企業が、URLの正規化に対応する共通の取り組みとして、「rel="cano
input type="radio"でchecked指定しているにもかかわらずデフォルトでチェックが入らない？と思ったときは・・・ 原因を調べるのにずいぶんと苦戦したので備忘録を作ります。 input name="calendar_1" value="1" type="radio" checked こんな感じのチェックボックスが画面にあるのですが、何度試してもデフォルトcheckedにならないのです。 IEでもFFでも再現しました。 Firebugからcheckedを再度指定し直したり、きちんとchecked="checked"に書き方を変えてみてもダメ。HTMLのバグかと思いましたよ。 原因は・・・そう、ラジオボタン、カレンダーで使ってたんですよ。 3月の1日と4月の1日が同じカレンダーの上に乗っかることもありますよね。 input name="calendar_1" value="1"
HTML5 の DOCTYPE 宣言 <!DOCTYPE html> ですが、今までなんとなく「どーせ IE6 では互換モードなんでしょー」って感じで生きてきたんです。 ごめんなさいごめんなさい＞＜ サンプルコード 確認してみてください <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 の DOCTYPE 宣言とレンダリングモードのテスト</title> </head> <body> <h1>HTML5 の DOCTYPE 宣言とレンダリングモードのテスト</h1> <dl> <dt>CSS1Compat</dt> <dd>標準モード</dd> <dt>BackCompat</dt> <dd>互換モード</dd> <dl> <script type="text/javascript">alert(docume
HTMLの記法について 基本的には「div」の様に要素を省略せずに記述して、それを展開すると「<div></div>」という形に展開されます。 このときに展開できる要素は以下の公式ドキュメントに明記されていますのでそちらを見るとよいです。 Zen HTML Elements Zen HTML Selectors Zen CheatSheets 基本的な記法 ひとつずつ順番に記述して説明していきます。しばらく初歩的な説明になるのである程度知っている方は飛ばしていただいて良いかと思います。 まずものすごく基本的な記法である、単独タグの記法について説明を行います。 cssのセレクタをイメージしながら見ていくと納得しやすいと思います。 タグだけ変換 変換前 div 変換後 <div></div> デモ 文末でtabを押してください div 変換後、div要素の間にカーソルが移動するので、すぐにテキ
アップルの新デバイス iPad が Flash に対応していないことや、アップルの CEO スティーブ・ジョブズ氏の苦言により、HTML5 は Flash に取って代わるのかという論議が現実味を帯びて論じられるようになりました。 「なぜAppleはiPadにFlashを載せるべきではない」のか AdobeのCTO、Kevin LynchがFlashを擁護―「HTML5はウェブビデオを暗黒時代に投げ戻す」 そこで、HTML 5 と Flash は何が違うのか両者の違いを図にまとめてみました。 (上の画像はクリックで拡大できます) 左側が HTML5 にしかない機能、右側が Flash にしかない機能で、中央の重なっているところが両方が利用できる機能です。グラフィック関係では、HTML5 では描画やビデオ関係はサポートするものの、テキスト周りや高度なグラフィック処理、デバイス機能ではまだ Fl
なぜだか分かりませんが、WordPressのいくつかのテンプレートタグでは、属性値をシングルクオテーション（単引用符）でくくって出力します。例えば、こんな感じ。 <link rel='index' title='NPtech.jp' href='http://www.nptech.jp' /> 「これ、なんかキモイ！」と思っていたのですが、仕様では特に問題ありません。 デフォルトでは、SGML規定はすべての属性値を二重引用符(ASCII十進34)または単引用符(ASCII十進39)のどちらかを用いて 囲うよう求めている。 http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/intro/sgmltut.html#h-3.2.2 ふむ、しかし、ぼく自身が単引用符でくくることはほとんどないし、ほかの人たちのコードを覗いてみても単引用符を使っているの
昨日の続き ちょっと調べたらそっこーで公式見解が見つかった。 Firefox 3 の修正内容のご紹介 その3 — URLも改行されるように | Mozilla Japan ブログ とにかく意図しない場所での改行が発生しないように、極力制限をかけている仕様になっています。これは、単純に文字だけを見て改行するかどうかを決定すると、日付の書式や、時間の書式等まで改行してしまったりすると、Web ページの内容自体を壊しかねないためです (日本語以外の言語圏では単語の途中で改行するという発想自体があまりないことの方が多いことに注意してください)。将来のバージョンではより改行の発生パターンは制限されるかもしれませんが、これ以上、改行可能位置が増えることはないと考えて頂いて良いと思います。 ﾏｼﾞｯｽｶ。。。増えないんすか。。 そして、この修正が完了した今、Web デザイナの方々にひとつお願いしたいこと
上記の属性は、Strict DTDでは使用できません。 target="_blank" の指定は、ユーザーの環境によってはポップアップブロックが機能してしまう場合があります。 フレームを使用している場合の例 form要素のtarget属性は、以下のようなケースで使用することがあります。 上のフレームにフォームを配置して、送信結果を下のフレームに表示する場合 チャットなどでよく見られたパターンです。上のフレーム内に入力フォームを配置して、送信結果（書き込み処理の結果）を下のフレームに表示します。 指定方法： 下のフレームにフレーム名を付けておき、form要素の target="" にそのフレーム名を指定します。 フレーム名については、フレームにフレーム名を付けるをご覧ください。 下のフレームにフォームを配置して、送信結果をウィンドウ全体に表示する場合 メールフォームを想定したパターンです。下
Slashdot: HTML 5の仕様からオーディオ・ビデオコーデックに関する要件白紙に。ベンダーの意向の相違が原因。 HTML5にて、ビデオコーデックの仕様が定まらず、予想通りに迷走してるっぽい。 Flash Playerの対立軸（？）として、一部で持ち上げられているHTML5だけれども、課題というか大きな問題点が１つある。 それはHTML5が利害関係の一致しないプレイヤーの綱引きで、フットワークと合理性を失いつつある点だと思う。 ビデオのコーデックなんかは、事実上のディファクト状態になった .flv 以後の主導権を誰が手に入れるか？という綱引き状態で、宙ぶらりん状態な感じかと。iPhone導入を契機にYoutubeにH264対応を押し通したAppleとしては、TheoraよりH264を通したいのだろうし、他も色々考えがあってまったくまとまらない。 ＜追記＞はてぶで指摘があったとおり、f
2009/05/28 「決してWebをあなどってはいけない」（Never underestimate the Web）。Google I/O 2009初日の基調講演でシュミットCEOに続いて登壇したのは、米グーグル バイス・プレジデントのビック・グンドトラ氏だ。ゆっくりと一語一語を区切りながら語り始めたグンドトラ氏の言葉には重みがある。彼は元マイクロソフト社員で、まさにWebをあなどっていた側にいたからだ。 グンドトラ氏はWindowsプラットフォームを唱道する立場にあった。彼に限らず、マイクロソフト社員の間には、ネイティブアプリケーションでなければできないことがあるとする見方が一般的だったという。「Keyholeという会社が出てきたとき、彼らが持つようなアプリケーションこそ、ネイティブでなければできないものだと言っていた。ところがグーグルは2004年11月にKeyholeを買収し、Goo
Updated 2013.11.04 / Published 2005.09.26 input要素（form input）の input は入力という意味でテキスト入力欄、送信・リセットの各種ボタン、チェックボックスなどのフォームのコントロール部品となる入力用オブジェクトを作ります。終了タグはなく、内容をもたない空要素です。どのコントロール部品を作成するかは、type属性で種類を指定します。 入力されたデータの送信先は、コントロール部品をまとめる form要素 の action属性で指定します。HTML4.01 strict, XHTML1.0 strict, XHTML1.1 では form要素の直下にインライン要素である input要素を直接記述することはできません。必ず p要素や div要素などのブロックレベル要素に内包させた形で記述しなければなりません。 バージョン HTML4.0
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く