CSSの新しい単位（lvh, svh, dvh)がすべてのブラウザでサポート、100vhがビューポートの高さいっぱいにならない問題を解決
Safari, FirefoxでサポートされていたCSSの新しいビューポート単位「lvh」「svh」「dvh」などが、ついにChromeでもサポートされました！ CSSの新機能で、Chromeが一番最後というのは珍しいですね。 最も活躍するのがiOSのSafariだからでしょうか。とはいえ、主要ブラウザすべてにサポートされるようになるのは、嬉しいニュースです。 画像: @bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 新しいビューポート単位「lvh」「svh」「dvh」とは ブラウザのサポート状況 はじめに W3CのCSS Values and Units Module Level 4で、ビューポート単位についていくつか仕様が変更されました。Large、Small、Dynamicといったビューポートサイズ
デフォルトでCookieをオリジンに紐づける、ChromeのOrigin-Bound Cookies - ASnoKaze blog
Blinkの開発者メーリングリストで「Intent to Prototype: Origin-Bound Cookies」という議論が行われています。 Cookieをより安全にするために、デフォルトでCookieをオリジンに紐づけるようにする提案です。Cookieをset-cookieしたオリジン以外からは、そのCookieにアクセスできないようになります。 詳しい背景や仕組みについては次のページから確認できます。 github.com かんたんに、Origin-Bound Cookiesの動作をみていきましょう。 例 オリジンは、スキーム、ホスト名、ポートの組です。それらのうち一つでも異なれば、オリジンが異なることになります。 例えば、次のようになります。 http://example.comによってセットされたcookieは、http://example.comにのみ送信されます。ht
Google、ウェブサイトのUX健全性を示すWeb Vitalsを導入。3つの重要指標はLCP/FID/CLS
[レベル: 上級] ウェブで優れたユーザー エクスペリエンスを実現するために “Web Vitals（ウェブ バイタル）” というコンセプトを Google は導入しました。 Web Vitals の土台として次の要素を重要視します。 読み込み時間 インタラクティブ性 ページ コンテンツの視覚的な安定性 それぞれの要素を測定するための指標とツールの提供を始めています。 Core Web Vitals: ウェブに関する 3 つの主な指標 Web Vitals を数値化するために、ウェブに関する特に重要な 3 つの指標を Google は設定しました。 ひっくるめて、“Core Web Vitals”（コア ウェブバイタル）と呼びます。 Largest Contentful Paint (LCP) First Input Delay (FID) Cumulative Layout Shift
Netflixで英語が勉強できる「LLN」がすごい！ 字幕の同時表示・速さ調整・辞書機能ありと至れり尽くせりだよ
» Netflixで英語が勉強できる「LLN」がすごい！ 字幕の同時表示・速さ調整・辞書機能ありと至れり尽くせりだよ 新年ということで、今年の目標を掲げた人も多いはず。わたしは英語をより深く学びたいと思っているのですが、タイミングよく、Netflixで最適なサービスを発見したんです。 それは「Language Learning with Netflix（以下 LLNと表記）」というサービス。 英語と日本語の字幕を同時に表示できるほか、セリフごとに巻き戻し・繰り返し・早送りができるなど至れり尽くせり。Netflixで好きな作品を観ながら、英語学習ができちゃうというわけなんです！ 【機能が充実しまくりなんです!!!】 Netflixユーザーなら無料で使えるこのサービス。Google ChromeのプラウザでNetflixを開くと、すぐに利用できます。 わたしはNetflixユーザーかつGoog
【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita
JavaScript の console がすごいことになっているらしい。 本日、以下の記事を見つけました。 Getting creative with the Console API! この記事で紹介されている console のメソッド全然知らなかったのでビックリしましたが、実際にどう表示されるのか載っていなかったのでChromeのコンソールでスクショを取ってみました。 console.log() 本文によるとlogメソッド内のテキストリテラルは以下の書式で値のフォーマットと置換ができるそうです。 %o / %O - for objects; %d / %i - for integers; %s - for strings; %f - for floating-point numbers; マジすか・・・ そんなわけで以下のコード console.log("Object value:
パスワード不要、生体認証でヤフーにログイン 「FIDO 2」対応 Androidスマホ＋Chromeで - ITmedia NEWS
パスワード不要、生体認証でヤフーにログイン 「FIDO 2」対応 Androidスマホ＋Chromeで Androidスマホ＋Chromeからヤフーにログインする際、生体認証が使用できるように。生体認証デバイスなどを利用して安全なログインを実現する規格「FIDO 2」に対応した。 ヤフーは10月23日、AndroidスマートフォンのWebブラウザ・Chromeから同社のサービスにログインする際、生体認証を使用できるようにしたと発表した。指紋認証や顔認証でログインでき、パスワード入力が不要になる。9月に国内企業で唯一認定を取得した、生体認証デバイスなどを利用して安全なログインを実現する規格「FIDO 2」に対応した。 従来、同社の各サービスにログインするには、パスワードを入力するか、SMS・メールに送信される確認コードを入力する作業が必要だった。今回、Yahoo! JAPAN IDにログイン
Chrome 70 デベロッパーツールが便利になってる！Web制作者がチェックしておきたい新機能のまとめ | コリス
DOMノードの強調表示 Consoleタブを選択。 DOMノードに評価される式を入力。 入力する式 以下の便利な式を使用できます。 「document.activeElement」で、現在フォーカスのあるノードを強調表示。 「document.querySelector(s)」で、任意のノードを強調表示。sはCSSセレクタで、DOMツリー内のノード上をホバリングするのと同じ。 「$0」で、DOMツリーで現在選択されているノードを強調表示。 「$0.parentElement」で、現在選択されているノードの親を強調表示。 パフォーマンスパネルの最適化 今までのパフォーマンスパネルは大きなページをプロファイリングする際にはデータの処理とビジュアル化に時間がかかりました。Chrome 70ではこの処理とビジュアル化が高速になりました。 パフォーマンスパネルの最適化 信頼性の高いデバッグ Chro
【要注意】Chromeが"www"サブドメインを自動的に隠すようになった模様 | ソフトアンテナ
Googleは先日Chromeの最新版である「Chrome 69」をリリースしました。Chrome 69には、マテリアルデザインの導入や新しいパスワードマネージャーの追加など、Chrome 10周年を記念するのにふさわしいさまざまな新機能が追加されていますが、中には気をつけないと行けない変更も含まれているようです。 例えば今回Chromiumのバグラッキングシステムに不具合として投稿され話題となっている内容は、Chromeのアドレスバーに表示されるドメイン名から"www"が自動的に削除されるというものです。 例えばChrome 69で"www.google.com"を表示すると、アドレスバーには"google.com"と"www"が省略された状態で、上記画像のように表示されます。 クリックすると完全なURLを確認することはできますが、通常状態で目視しただけでは"google.com"を開い
「Google Chrome 67」安定版リリース--「Spectre」緩和策、「WebAuthn」対応など - ZDNet Japan
Googleは、「Windows」「Mac」「Linux」向けの「Google Chrome 67」安定版をリリースした。34件のセキュリティ修正を施したほか、パスワードに依存しない新たな認証方式「WebAuthn」にデフォルトで対応する。 Googleは4月、「WebAuthn」のサポートを表明していた。指紋やスマートフォンに保存された顔画像のような生体認証情報、あるいはYubikeyの認証デバイスのようなUSBハードウェアを利用してウェブサイトにサインアップする手段を提供する。 Chrome 67は、World Wide Web Consortium（W3C）仕様「Generic Sensor API」もサポートしている。このAPIによって、ゲーム、仮想現実（VR）、拡張現実（AR）、フィットネストラッキングなどの分野で、センサの利用範囲がネイティブアプリからウェブアプリケーションにま
【拡張不要】Chromeでスクロールするページ全体のスクリーンショットを撮る方法！ | iSchool合同会社
このサイトでは、SEO・Googleビジネスプロフィール・ローカル検索など、Web集客に関する最新情報を配信しています。 拡張機能を使わずに、Chromeでスクロールするページ全体のスクリーンショットを撮る方法を紹介します。 例えばプレゼン資料を作っているときに、PCサイトでページ全体のスクリーンショットが必要なことがあります。 また、モバイルサイトでページ全体のキャプチャが必要なこともありますよね。 そんな時には、Chromeに標準で搭載されている機能を使えば、拡張機能を使わずに、ページ全体のスクリーンショットを撮ることが可能です。 PCサイトでページ全体のスクリーンショットを撮る方法PCサイトでページ全体のスクリーンショットを撮る方法についてです。 次の手順で行ってください。 デベロッパーツールを立ち上げる詳細機能を呼び出す「capture」もしくは「full」と入力し、「Captur
Google Chrome、Firefox最新版（Chrome 57 / Firefox 52)についにWebAssemblyが正式搭載！でWebAssemblyってなんだ？ | DevelopersIO
こんにちは、せーのです。今日はChromeのアップデートで搭載された、これからのWebを変える(かもしれない)技術をご紹介します。「WebAssembly」、と言います。 WebAssemblyって何？ Chromeの最新バージョンは大きなアップデートとして「CSS Grid Layoutのサポート」と「Media Session Apiのサポート」があります。CSS Grid Layoutは今までHTMLのTableタグで表現していたような縦と横、2次元のレイアウトをCSSで表現できる、という機能、Media Session APIはAndroidのChromeでロック画面などに出てくる音楽、動画のコントロール機能にブラウザからアクセスできる、というものです。これは特にモバイルで動画や音楽を流すWebサイトを作っている人には嬉しい機能ではないでしょうか。他にも「chrome://plug
PornhubはWebSocketを使ってAdBlockを回避している
BugReplay あるWeb開発者が、開発のためにchromeで通信内容をキャプチャしたいと考えchrome.webRequestを使ったが、WebSocket経由の通信は得られないことを発見した。さっそくこれをバグ報告した。 その後、インターネット上でわいせつ動画を頒布する大手Webサイトとして有名なPornhubの運営会社であるMindGeek社の社員がこのバグを修正しないようコメントした。 不思議に思って調べてみると、PornhubはWebSocketを使って広告データをやり取りすることで、AdBlock系のブラウザー拡張による広告除去を回避していることが判明した。 なお、この記事を公開して程なくして、AdBlock PlusとuBlock OriginはPornhubに対するWebSocket経由の広告除去も実装した。 技術的に可能であることを示すことと、実際に労力を割いてまで実
Google、WindowsやMacの「Chromeアプリ」終了へ、Chrome OSのみに
米Googleは8月19日(現地時間)、Windows/Mac/Linux向けのChromeアプリの提供を終了させる計画を明らかにした。段階的に縮小しながら、約1年半後にサポートを完全終了させる。Chrome OSでのサポートは継続する。 ChromeアプリはHTML5、CSS、JavaScriptで構築されたWeb技術ベースのアプリで、WebブラウザChromeやChrome OSで使用できる。パッケージ型アプリとホスト型アプリの2種類があるが、Chrome OS以外のプラットフォームではどちらも終了になる。パッケージ型は、ブラウザの外側で独立したアプリのようにふるまい、またオフライン機能に優れる。Web技術ベースのアプリの短所を埋めるようなアプリになっているが、GoogleによるとWindows/Mac/Linuxでパッケージ型アプリをアクティブに使用しているユーザーは約1％にとどまる
Object.observe の死 (ECMAScript の提案取り下げ、V8 からも削除予定)
1年前の記事 JavaScript フレームワークがデータバインディングを実現する４通りの手法 では、Object.observe() について次のように説明した。 JavaScript オブジェクトが変更されたときにコールバックを呼んでくれる API データバインディングの実装が簡単になる Google Chrome には実装済み ECMAScript 7 に提案中 提案が通れば MV* フレームワークの実装がシンプルになってハッピー 将来を期待されていた Object.observe() であったが、2015 年 11 月頭、ES Discuss メーリングリストへの An update on Object.observe という投稿で、ECMAScript からの提案が取り下げられて、V8 エンジンからも年内に削除される予定であることが表明された。 Object.observe()
Classes (ES6) Sample
Available in Chrome 42+ | View on GitHub | Browse Samples Background ES6 Classes formalize the common JavaScript pattern of simulating class-like inheritance hierarchies using functions and prototypes. They are effectively simple sugaring over prototype-based OO, offering a convenient declarative form for class patterns which encourage interoperability. Classes (as shipped in Chrome) support proto
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Anarios/return-youtube-dislike: Chrome extension to return youtube dislikes
「Google Chrome 67」はデスクトップ“PWA”をサポート！……で、“PWA”って何？／「Google フォト」や「Twitter Lite」といったWebアプリをまるでデスクトップアプリのように【やじうまの杜】
JVN#98975951: Chrome 拡張機能 5000兆円コンバーターにおけるクロスサイトスクリプティングの脆弱性
Situs Judi Online dan Slot Online Bocoran Rtp Terpercaya Indonesia - devtoolstips.com
324668 - chromium - An open-source project to help move the web forward. - Monorail