Web Components の最近の仕様と開発手法
はじめに Web Components だけで開発を行う場合、どのような技術を使えばいいのかを調べてみました。結論は最後に書いています。 Specifications Web Components specifications: https://github.com/w3c/webcomponents Web Components are a new browser feature that provides a standard component model for the Web, consisting of several pieces: Shadow DOM Custom Elements HTML Imports HTML Templates Can I use Web Components? Can I use... Support tables for HTML5, CSS
Removing jQuery from GitHub.com frontend
EngineeringRemoving jQuery from GitHub.com frontendWe have recently completed a milestone where we were able to drop jQuery as a dependency of the frontend code for GitHub.com. This marks the end of a gradual, years-long… We have recently completed a milestone where we were able to drop jQuery as a dependency of the frontend code for GitHub.com. This marks the end of a gradual, years-long transiti
2018年のWeb標準 | gihyo.jp
🚩 about:configにてdom.moduleScripts.enabledを有効した時のみ。 デスクトップ環境については、開発が終了しているIE11を含め、EdgeとFirefoxがサポートしていないので、しばらくはポリフィルであるwebcomponents/webcomponentsjsの利用が前提になるでしょう。一方で、モバイル環境についてはAndroidとiOSにおいてほぼすべてを占めるChromeとSafariがこれらの仕様をサポートしており、既にモバイルWebにおいてはWeb Componentsを充分に利用できる状況にあると言えます。モバイルWebをターゲットとしているサービスであれば積極的に導入していけるのはもちろんのこと、ターゲットブラウザを限定しているWebアプリケーションなどでも試してみる価値はあります。 React、Angular、Vueといったライブラリに
iOS で click イベントがわけのわからない動作をする件について - Qiita
iPhone や iPad などでも、 JavaScript の click イベントは基本的に有効です。 しかし、これらのデバイスで click イベントを拾おうとすると、うまくいかないことがあります。 このあたり、結構わけのわからない仕様になっているので、順を追って説明します。 なお、以下の説明では jQuery 1.9以上の使用を前提としています。 どういうときにうまくいかないか とりあえず、以下のHTMLを前提とします。 ... <body> <p id="child1">...</p> <p id="child2">...</p> </body> ...
web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
もう逃げない。HTMLのviewportをちゃんと理解する
<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot
<template>: コンテンツテンプレート要素 - HTML: ハイパーテキストマークアップ言語 | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Content categories - HTML: HyperText Markup Language | MDN
Web Components / Shadow DOM
webcomponents.org - Discuss & share web components