HTMLの仕様が変更され、属性値内に記述した<と>がエスケープされるようになります
先日、HTMLの仕様が変更され、属性値内に記述した<と>がエスケープされるようになりました。この変更は6/25にリリースされたChrome 138やFirefox 140をはじめ、Edge, Safariも次のバージョンでサポートされる予定です。 この変更は主に、XSS脆弱性の防止に役立ちます。Web制作者に与える影響と潜在的な問題について紹介します。 HTML spec change: escaping < and > in attributes 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに 変更点 変わらなかった点 何が壊れないのか 何が壊れるのか 終わりに はじめに 2025年5月20日にHTMLの仕様が変更され、属性内の<と>がエスケープされるようになりました。これによ
HTML の img 要素と image タグ: Days on the Moon
この記事は HTML アドベントカレンダーの 20 日目の分、兼 JavaScript アドベントカレンダーの 20 日目の分です。 HTML のタグといえば、要素の開始位置、終了位置、そして属性を指定する記述のことですね。開始タグは小なり記号 (<) の後に要素名が続きます。しかしながら、タグに既述した名前とは別の名前の要素が生成される場合があります。 以下の JavaScript コードを実行すると、JavaScript コンソールには (IMAGE ではなく) IMG と出力されます。タグに記述された名前は image なのに、img 要素が生成されているのです。 const div = document.createElement('div'); div.innerHTML = '<image src="" alt="">'; console.log(div.firstChild.
CSSとJavaScriptのインライン化
CSSやJavaScriptをインライン化してみている。速い。ラスター画像もBase64で埋め込めみたくなる。しかしインライン化はやはり気持ちが悪く、落ち着かない。この気持ち悪さはウェブサイトと言う単位に意味が薄くなってしまうことにあるのではないか。 ウェブサイトは全体で一冊の本になっているようなイメージが漠然とある。フレーム全盛期を体験していることが大きい。このイメージではそれぞれのウェブページはその本のページにあたり、それぞれから参照されるCSSやJavaScriptファイルはそのページ群を留める接着剤やひもにあたる。それらをインライン化してしまうと、本のページそれぞれを切り離し、ペラペラな紙にしてしまっているような印象を持ってしまう。 実際にはそれぞれのウェブページは半ば独立したもので、ユーザーからも様々なウェブサービスからもそう扱われるようになって久しい。直帰率が限りなく100%に
［速報］マイクロソフト、HTML5/JavaScriptアプリをiOS／Android／Windows対応に一括変換する「ManifoldJS」をオープンソースで発表。Build 2015
［速報］マイクロソフト、HTML5/JavaScriptアプリをiOS／Android／Windows対応に一括変換する「ManifoldJS」をオープンソースで発表。Build 2015 マイクロソフトが米サンフランシスコで開催中のイベント「Build 2015」。2日目の基調講演では、iOSやAndroid、Windows 10などクロスプラットフォーム対応のアプリケーションを一括で生成するツール「ManifoldJS」を発表しました。 マイクロソフト チーフエヴァンジェリストのスティーブ・グッゲンハイマー氏。「Windows対応だけではなく、クロスプラットフォーム対応のアプリケーションをどう作ればいいのかとよく聞かれる。2年前、われわれはゲーム向けにUnityを発表し、昨年はiOSとAndroid対応でXamarinの採用を発表した。今年はWebアプリケーションにフォーカスしよう」
Web Componentsを構成する4つの仕様 ー Web Components基礎編
我々Web開発者がWeb Componentsという言葉を耳にしてから、もう2年程経ったでしょうか。Web Componentsが変えるWeb開発の未来という記事に、「今のWeb開発がどのような課題を抱えているか、それをWeb Componentsがどう解決するか」を書きました。これを踏まえて、本連載ではWeb Componentsの仕様から実装、PolymerやX-TagといったWeb Componentsを支えるライブラリなどの周辺知識まで解説していきます。 Web Componentsを支える4つの仕様 連載第1回目となる本記事では、Web Componentsを支える4つの仕様について解説します。Web Componentsは以下の4つの独立した仕様から構成されます。 Custom Elements – 独自のカスタム要素をユーザーが定義することを可能にする Shadow DOM
JavaScript が無効なユーザーはほとんどいない。だから... | Accessible & Usable
公開日 : 2013年12月27日 (2014年3月9日 更新) カテゴリー : アクセシビリティ / ユーザビリティ 「Web ユーザーのうち、JavaScript を無効にしている人はどのくらいいるのだろうか？」という話題は、Web サイトの制作や運営に関わる人の間では、以前から関心の高いところだと思います。海外でもこの話題を扱った記事は多く、Web 上で検索してみると、いろいろな記事が見つかります。 How many people browse with Javascript disabled? How many people are missing out on JavaScript enhancement? (イギリス政府「Government Digital Service」の記事) How many users have JavaScript disabled? (「Yaho
モーダルダイアログを視覚表現だけで終わらせない - Web Accessibility Advent Calendar 2013 - neotagの雑文
Web Accessibility Advent Calendar 2013 初日です。 http://www.adventar.org/calendars/64 neotagです。初日なのに記事公開が遅れてしまいました。 しょっぱなから出鼻をくじいてしまい大変申し訳ありません。（土下座） 追記 2013/12/06 この記事の補足になる記事を @milk54 さんが書いてくださいました。 リニューアルして情報が得られなくなったというサイトを調べてみた 追記ここまで JavaScript による視覚表現が盛んになってから当たり前に使われるようになったモーダルダイアログについてです。 このモーダルダイアログ、ちょっとした情報を追加で表示する際に大変便利なのですが、見た目だけ実装すると思わぬ罠があります。 普通に組んだ場合 Library など使わずに普通に JavaScript を書いた場合
wri.peで学ぶ、イマドキのWebアプリの作りかた（前編）
エキスパートが手がけたプロダクトを題材に技術的な解説を行っていくシリーズ連載、今回は wri.peです。 難しい機能の実装や、先進的なAPIの利用を通じて、執筆者が得たノウハウを余すところなく紹介していきます。 HTML5を活用したメモ帳アプリ [wri.pe] 最近、仕事で作っているミイルが忙しかったり、趣味で作っているMobiRubyがなかなか進まなかったりして、個人でWebサービス的なモノを作っていない事が自分としてちょっと気になっていました。 そこで息抜きとして、ゴールデンウイークに集中してWebサービスを一つ作ろう！と思い立ち、wri.peというWebサービスの開発に着手しました。 wri.peは自分が使いたいと思えるメモ帳を作ったので、下記の様な特徴を持っています。 Markdownフォーマットをサポート Gmailの様なアーカイブ機能 全文検索 カレンダーへのマッピング iP
【GDC 2013 Vol.33】HTML5+JavaScriptで容易にWii Uでのゲーム・アプリ開発が可能に・・・「任天堂ウェブフレームワーク」発表 / GameBusiness.jp
今回のGDCで任天堂は2つの開発者向けセッションを予定。最初に行われたのは「Nintendo Wii U Application Development with HTML and JavaScript」(HTMLとJavaScriptを使ったWii Uアプリケーション開発)と題したセッション。講師は任天堂の環境制作部の島田健嗣氏です。 Wii Uの最大の特徴であるWii U GamePadは、手元にある第2のスクリーンとして、テレビ画面と連携することによって、多くの人々と体験を共有しながら、操作性の良さを同時に実現することができます。任天堂は昨年末の発売から、ゲームソフトだけでなく、『YouTube』や『ニコニコ動画』、あるいは『Wii Street U』といったアプリケーションをリリースしてきました。これらは元々、ウェブサービスとして提供されているものですが、リビングでの体験へと変化
Cinnamon.js: Find In-Page Text using Synonyms | Thomas Park
A visitor to your site decides to follow you on Twitter. You have a link in your footer — but their search for “Twitter” comes up empty and they move on. Unfortunately, you named the link “@username” instead. Cinnamon.js prevents just this situation, taking some of the pain out of naming things. It allows users to find links, images, and other content by their synonyms, using the browser’s built-i
Rendering templates obsolete
rendering_templates_obsolete.md (tl;dr DOM builders like domo trump HTML templates on the client.) Like all web developers, I've used a lot of template engines. Like most, I've also written a few of them, some of which even fit in a tweet. The first open-source code I ever wrote was also one of the the first template engines for node.js, [a port][node-tmpl] of the mother of all JavaScript template
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Webパフォーマンス ベストプラクティス - Make the Web Faster
Webパフォーマンス ベストプラクティス Last updated: 02 October 2012 翻訳：@t32k WebページをPage Speedで調べるとルールに準拠していないものが提示される。このルールというのは、一般的にあなたが開発段階において取り入れるべきフロントエンドのベストプラクティスだ。あなたがPage Speedを使用しようとしまいと、私たちはこの各ルールについてのドキュメントを提供する（たぶんちょうど新しいサイトを開発中でテストする準備が整ってないだろう）。もちろん、これらのページはいつでも参照することができる。私たちはあなたの開発プロセスに取り入れてもらうために、このベストプラクティスを実装するための明確なティップスと提案を提供する。 パフォーマンス ベストプラクティスについて Page Speedはクライアント側からの観点でパフォーマンスを評価し、一般的にペー
Learn HTML5, CSS3, Javascript - video style tutorials
Learn HTML5, CSS3, Javascript and more... Video style walkthroughs showing cool stuff being created from scratch
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今までああ書いてたアレ、これからはこう書けそう 2022 - DevFest Tokyo 2022
Safe DOM manipulation with the Sanitizer API | Articles | web.dev
Hexagons grid - responsive
NameBright - Coming Soon
Site Under Maintenance
短期間＋大規模ゲーム開発でも破綻しないHTML・SCSS
