WebKit Features in Safari 18.0
Safari 18.0 is here. Along with iOS 18, iPadOS 18, macOS Sequoia and visionOS 2, today is the day another 53 web platform features, as well as 25 deprecations and 209 resolved issues land in WebKit, the rendering engine driving Safari. New in Safari 18 Distraction Control Distraction Control lets you hide distracting items as you browse the web, such as sign-in banners, cookie preference popups, n
【JavaScript】ネイティブで集合演算できるようになった - Qiita
JavaScriptにはだいぶ前からSetオブジェクトがありましたが、何故か集合演算は全く定義されておらず自力で実装しなければなりませんでした。 その後、まあ不便だねってことでSet Methods for JavaScriptというproposalが提出されました。 実装は珍しくSafariが最も早く、2023/09/18のSafari17から対応しました。 その後2024/02/21にChrome122、そして2024/06/11にFirefox127で実装されたことにより、主要全ブラウザで集合演算が使用可能になりました。 複数環境で実装されたことから、無事ES2025としてStage4、つまり上がりになりました。 ということで使い方を紹介するよ。 Set.prototype.intersection() 要素と引数の、両方に含まれる値を返します。 new Set([1, 2, 3,
末尾呼び出し最適化とJavaScript
著者情報 : kota-yata.com プレゼン動画 : https://www.youtube.com/watch?v=BcaPCnWZuvY
iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
2019年、2020年のJavaScript - 別にしんどくないブログ
この記事は JavaScript Advent Calendar 2019 - Qiita の初日の記事です。 2019年を締めくくるアドベントカレンダーの初日ということで、今年のJavaScriptを簡単に振り返りたいと思います。2020年のJavaScriptについても予習しましょう。 2019年、2020年が何を指しているかは後述します。 カテゴリが「プログラミング言語」なので、React、Vue、AngularやNode.jsなどJavaScriptを使った技術ではなく、JavaScriptの言語機能にフォーカスしたいと思います。 はじめに ES2019 Optional catch binding JSON superset Symbol.prototype.description Object.fromEntries Well-formed JSON.stringify Arr
noteと"contenteditable"｜ct8ker｜note
この記事は旧バージョンのエディタについてのものになります。 現在は進化した新バージョンがリリースされています。 初めてエンジニアらしい記事を書きます。 記念すべき？初回はHTML5のcontenteditableのお話です。 contenteditableコンテントエディタブル、と読みます。content editable。 こいつは何なのか、超ざっくり言ってしまうと、HTMLタグ内のテキストを編集可能にしてくれる属性、です。百聞は一見にしかずで例を出してみます。 <p contenteditable=true> コンテントエディタブル </p>これをブラウザで表示すると、pタグの中身が編集可能（キャレットを合わせて、キーボード入力可能）な状態になります。一般的にHTMLの世界でテキストを入力する手段といえば、inputやtextareaを思い浮かべるのではないかと思いますが、通常表示する
JavaScript とクロスブラウザでの IME event handling (2017年) - たにしきんぐダム
この記事は CAMPHOR Advent Calendar 2017 22日目の記事です。 昨日は @ryota-ka による Type-level TypeScript - ryota-ka's blog でした。 CompositionEvent が多くの主要ブラウザでサポートされた2017年冬なら、JavaScriptで日本語入力に対応したちょっとした入力補完機能の実装はシュッとできると思ったのですが、ブラウザによって細かい実装が異なっていてちまちまとしたworkaroundが必要になったのでメモ 検証環境 Windows10 / Microsoft Edge 41.16299.150 Windows10 / InternetExplorer11 バージョン: 11.64.16299.0 macOS Sierra 10.12.6 / Google Chrome バージョン: 63.0
次世代のWebGPUの可能性 – コンピュートシェーダーで高速並列計算 - ICS MEDIA
ウェブの3Dグラフィックスを扱う新しい仕様として提案されているWebGPU。仕様はまだ提案の段階ですが、すでに広く普及しているWebGLと比べて一体なにができるのでしょうか？ 本記事ではWebGPUで使用できる筆者イチオシの機能、コンピュートシェーダーについて紹介します。 WebGPUについて詳しくは前回の記事「次世代仕様のWebGPUとは？ 」をご覧ください。 ▲WebGPUのコンピュートシェーダーを使って並列ソートの一種である「バイトニックソート」を実行するデモ。CPUとGPUとの実行時間を比較したところ、WebGPUを使った場合は10倍高速な結果となった ▲ランダムな要素が「バイトニックソート」アルゴリズムでソートされていく様子を可視化したデモ。ソートの計算とレンダリングにWebGPUを使用している コンピュートシェーダーとはGPGPUを行うためのシェーダー GPU（グラフィックス・
次世代のWebGPUの可能性 - WebGLと比較して理解する描画機能の違い - ICS MEDIA
ウェブの3Dグラフィックスを扱う新しい仕様として提案されているWebGPU。前回の記事ではGPGPU（GPUによる汎用計算）用の機能、「コンピュートシェーダー」について紹介しました。 一方、WebGPUの描画機能については何ができるのでしょうか？ WebKitの実験ページ「WebGPU demos」にWebGPUを使用したデモが示されていますが、これだけではいまいちWebGPUのポテンシャルを量ることができませんでした。そこで、WebGPUの描画機能について可能性を探るべく、WebGPUとWebGLを比較するデモを作ってみました。 WebGPUについて詳しくは以前の記事「次世代仕様のWebGPUとは？ 」をご覧ください。 WebGPUの描画デモ 3Dモデルを読み込んで、canvas要素にWebGPUのレンダリングで表示するデモです。それぞれのモデルは独立に回転しており、いわゆるドローコール
AppleもiOS/macOSをProgressive Web Apps（PWA）対応へ。次のSafari 11.1でService Workerなど実装
AppleもiOS/macOSをProgressive Web Apps（PWA）対応へ。次のSafari 11.1でService Workerなど実装 Appleが、iOSとmacOSの次バージョンにバンドルされるSafari 11.1で、Progressive Web Apps（PWA）の重要な構成要素であるService Workerをサポートすることが分かりました。次のiOSとmacOSのバージョンはiOS 11.3/macOS 10.13.4で、現在ベータ版としてAppleが開発中です。 PWAとは、HTML、CSS、JavaScriptなどのWeb技術によって開発されるWebアプリケーションの一種です。Webサーバから配信されて実行されるだけでなく、リソースをローカルに保存しオフラインでの実行にも対応。Service Workerによるバックグラウンド処理やプッシュ通知なども
ChromeのMediaStreamTrackとvideo要素の組合せには罠がある話 - console.lealog();
WebRTC界隈で、 Chromeの`video.srcObject = stream`はバグってるから使っちゃダメ 代わりに`video.src = URL.createObjectURL(stream)`を使え という噂があって。 とはいっても、 Safariでは`URL.createObjectURL(stream)`がエラーになる URL.createObjectURL(stream) が廃止予定となりました | Firefox サイト互換性情報 などなど事情もあるのでそろそろ`srcObject`だけ使いたい！ そのためにもどういうケースでバグってるとか、この噂の真意を確かめたいなーと思って調べてたのが事の発端。 よくわからなかった 実際に`srcObject`を使ってるコードでストリームが止まる謎の挙動を示すケースが実際にあった。 ただ代わりに`createObjectURL(
Safari による User-Agent 固定化と Web における Feature Detection | blog.jxck.io
Update 2018/3/1 : Safari 11.0.3 の UA を追記 2018/4/16: Safari 11.1 の UA を追記 2018/5/1 : OS のバージョンは固定されなくなった件を追記 2 月に方針が変更され、 OS のバージョンは固定されなくなった。 このため、 iOS のバージョンアップにより発生するバグなどを回避する道は残されたことになる。 一方 Webkit のバージョンは(予定では 605.1.15 に)固定されることになりそうだ。詳細は、以下を参照。 Safari の UA 文字列が固定されて固定されなくなったおはなし - fragmentary Intro 少し前に Safari Technology Preview 46 がリリースされた。 Service Worker のアナウンスに目がそちらに盗まれている一方、しれっと以下の一文がある。 F
広告の効果測定サービスで利用している、計測用のJavaScriptタグでSafariのITP対応した話 - Qiita
はじめに この記事は下記の勉強会での発表資料になります 自己紹介 株式会社オプト シニアエンジニア @sisisin GitHub Twitter フロントエンドマン（Angular,AngularJS中心） Scalaも少々 最近はスクラムマスターやってます 先日、Safari11にてIntelligent Tracking Prevention(以下ITP)という機能がリリースされました ITP機能はユーザーのプライバシー保護のためにCookie利用に制限をかける機能で、これにより弊社の広告の効果測定サービスのユーザー行動の計測部分にも影響が出ました 最前線で使われるリアルなJSフレームワーク事情！ という題目とはちょっと逸れてしまいますが、その問題について元々どのように計測を行っていたか、そこでどういうケースで問題になったか、最終的にどのようにその問題を解決したかを説明しようと思いま
Not Rocket Science » Handling IME events in JavaScript
Stack Overflow has been expanding past the English-speaking community for a while, and with the launch of both a Japanese version of Stack Overflow and a Japanese Language Stack Exchange (for English speakers interested in learning Japanese) we now have people using IME input regularly. For those unfamiliar with IME (like I was a week ago), it's an input help where you compose words with the help
やばい、iOSにネイティブアプリ要らなくなるかも。SafariもPWAに対応する可能性 - Qiita
これ以上は長くなるため後述． ##Chromeは既に，Safariもようやく 上記の通り，Service WorkersがPWAでも最重要な機能の一つである．Chromeでは既に対応済み． しかしSafariが対応しておらず，世間的にはモチベーションの上がらない状況であった（やちまもその一人である）． Safariにおいて，Service Workersの実装状況 No active development が Under Consideration になったのは2015/12/041のことである． 20ヶ月という永遠とも呼べる時を経て，2017/08/032にようやく In Development となったわけであった． ##だから何なのか SafariにService Workersの実装がなされると，一気にウェブアプリへの移行が進む可能性が大きい． ブラウザの制約が弱まり，ウェブアプ
iOS 9以下でもiPhone safariでインラインで動画再生する方法第三弾 - Qiita
いよいよFelicaポート搭載のiPhone 7が発表されましたね！サプライズもありまだまだ日本でのiPhone一強は続くのではないかと感じさせられました。 さて、そのiPhone 7に搭載される予定のiOS 10ではいよいよsafariでも動画のインライン再生が可能になります。 [iOS 10 Safari から video の inline 再生が可能になります - latest log] (http://uupaa.hatenablog.com/entry/2016/08/29/171809) ##iOS 9以下でもインライン再生する [iPhone Safariで動画をインライン再生する方法 - Qiita] (http://qiita.com/hadakadenkyu/items/75162099d0bf7cdcfdc7) [【音声対応】 iPhone Safariで動画をインラ
iOS8 safariではviewportが解釈されるよりも前にJavaScriptが実行されるらしい - Qiita
window.innerHeightやwindow.innerWidthの値が意図したように取得できない。 実検 <body> <script type="text/javascript"> (function(){ //即時関数で取得 document.write('<p>window.innerHeight(instant): <span>'+ window.innerHeight + 'px</span></p>'); document.write('<p>window.innerWidth(instant): <span>'+ window.innerWidth + 'px</span></p>'); })(); </script> <!-- DOMContentLoaded --> <p>window.innerHeight(DOMcontentLoaded): <span id
Safari 9.0 の JS で「同じ関数を繰り返し実行しただけで返り値が変わる」という強烈なバグが発見されてる - Qiita
Webkit の Bugzilla で強烈なバグが報告されていると、同僚に教えて頂いた。 あまり話題になっていないものの、単純ゆえに強烈なバグだと思ったので Qiita にも公開しておく。 https://bugs.webkit.org/show_bug.cgi?id=151354 にそのバグ報告が上がっている。 最初に Google+ でやりとり があった模様。 URL のクエリ文字列から値を取り出す関数が正常に動作していないことから発覚したようだ。 その後は、簡単なテストケースに落とし込まれ jsfiddle というサイトにテストケースが公開されている。 Safari でこのページを開くと、実際に JavaScript を実行して確認できるようになっている。 続報 (2015.12.14) この記事を上げてすぐに Bugzilla の方で進展があった。 Yusuke SUZUKI さん
Webプログラマから見たiOS9 Safari9のCSS/JavaScriptなどの新機能解説 - Qiita
iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。 ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能（OSX版含む） CSS系 backdropフィルタ対応 新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。
iOS 9 MobileSafari に入るかもしれない機能の一覧 - latest log
以前は、https://github.com/uupaa/Spec.js/wiki にぶら下げていたのですが、専用のブランチに移動しました。 https://github.com/uupaa/WebKitChangeLog/wiki/iOS9.x.x.changesets このような機能が利用可能になると予想しています。 HTML/DOM/CSS ES6 のテンプレート文字列を node.cloneNode(true)できない不具合が修正されました <attachment> の実装が始まりました CSS 4 の実装が始まりました calc() の不具合が多数修正されました CSS calc で grad や ms などの単位系が利用可能になりました -webkit-animation-* がアンプレフィックスされました style="mix-blend-mode:plus-lighter"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
