タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Operaにもサポートされています。 読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介します。 content-visibility: the new CSS property that boosts your rendering performance by Una Kravets, Vladimir Levin 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに content-visibilityのサポート状況 CSS Containmentとは content-visi
長年触れられてなかった ABEMA の番組表を content-visibility でパフォーマンス改善した話 | CyberAgent Developers Blog
はじめに こんにちは、ABEMA で Web フロントエンドエンジニアをしています、20新卒の坂上です。 ABEMA には、各日付ごと、各チャンネルごとにどの時間帯にどの番組が放送されているかを確認できる 番組表 機能が存在します。 この番組表は開局当初から存在するものの、現在までそれほど変わりはない機能です。 そのため、実装にも手が加えられておらず、数年前の React のコードがそのまま残っている箇所も存在していました。 それゆえ、コードリーディングがしづらく、実装の詳細や仕様に関して詳しく知っている人がいないという状態から、番組表のパフォーマンスが芳しくないことは課題として上がっていましたが手をつけられていない状態でした。 その番組表に対して、再レンダリングの抑制と新しく提案された CSS プロパティである content-visibility を導入しました。 結果としては、Tim
content-visibility: the new CSS property that boosts your rendering performance | Articles | web.dev
The content-visibility property, launching in Chromium 85, might be one of the most impactful new CSS properties for improving page load performance. content-visibility enables the user agent to skip an element's rendering work, including layout and painting, until it is needed. Because rendering is skipped, if a large portion of your content is off-screen, leveraging the content-visibility proper
GitHub - kubeshark/kubeshark: The API traffic analyzer for Kubernetes providing real-time K8s protocol-level visibility, capturing and monitoring all traffic and payloads going in, out and across containers, pods, nodes and clusters. Inspired by Wireshark
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
週刊Railsウォッチ（20210209後編）Rubyでミニ言語処理系を作る、Kernel#getsの意外な機能、CSSのcontent-visibilityほか｜TechRacho by BPS株式会社
週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙇 TechRachoではRubyやRailsの最新情報などの記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます（例:週刊Railsウォッチタグ） 🔗Ruby 🔗 Rubyでミニ言語処理系を作る 元記事: RubyでオレオレVMとアセンブラとコード生成器を2週間で作ってライフゲームを動かした話 -
※もっと具体的に知りたい方はCSS 2.2の11.2 Visibility: the 'visibility' propertyなどをご覧ください。 visibility vs display vs opacity ただ要素を見えなくするだけなら透明度を操作するopacityプロパティがあります。しかしそれよりもvisibilityが優れている点は、不可視になる（値がhiddenやcollapaseになる）と同時にアクセシビリティツリーからしっかり削除され、スクリーンリーダに読み上げられずタブフォーカスも当たらなくなるというところです1。display: none;との違いは「表示領域が残るかどうか」以外違いはありません。 特に、値collapseはテーブルなどで特定のセルや行だけを非表示にしたい場合などにも重宝します。display: none;でも同じような表現になりますが、colla
Amazon CloudWatch Internet Monitor Preview – End-to-End Visibility into Internet Performance for your Applications | Amazon Web Services
AWS News Blog Amazon CloudWatch Internet Monitor Preview – End-to-End Visibility into Internet Performance for your Applications How many times have you had monitoring dashboards show you a normal situation, and at the same time, you have received customer tickets reporting your app is “slow” or unavailable to them? How much time did it take to diagnose these customer reports? You told us one of y
Introducing Amazon S3 Storage Lens – Organization-wide Visibility Into Object Storage | Amazon Web Services
AWS News Blog Introducing Amazon S3 Storage Lens – Organization-wide Visibility Into Object Storage When starting out in the cloud, a customer’s storage requirements might consist of a handful of S3 buckets, but as they grow, migrate more applications and realize the power of the cloud, things can become more complicated. A customer may have tens or even hundreds of accounts and have multiple S3 b
Sad news! CodeSee shut down on Thursday, Feb 22nd. Check back for updates.
GitHub - redpanda-data/console: Redpanda Console is a developer-friendly UI for managing your Kafka/Redpanda workloads. Console gives you a simple, interactive approach for gaining visibility into your topics, masking data, managing consumer groups, and e
Message viewer: Explore your topics' messages in our message viewer through ad-hoc queries and dynamic filters. Find any message you want using JavaScript functions to filter messages. Supported encodings are: JSON, Avro, Protobuf, XML, MessagePack, Text and Binary (hex view). The used encoding (except Protobuf) is recognized automatically. Consumer groups: List all your active consumer groups alo
Announcing Docker SBOM: Increased Docker Image Visibility | Docker
Announcing Docker SBOM: A step towards more visibility into Docker images Today, Docker takes its first step in making what is inside your container images more visible so that you can better secure your software supply chain. Included in Docker Desktop 4.7.0 is a new, experimental docker sbom CLI command that displays the SBOM (Software Bill Of Materials) of any Docker image. It will also be incl
Android 11 changes how apps can query and interact with other apps that the user has installed on a device. Using the… 自アプリを Target SDK Version 30 (R) 以上にしなければ例え Android 11 端末でも影響はありません。 変更内容対応なしに他アプリの情報を取得する API (PackageManager API) を利用すると、その API に応じて NameNotFoundException が投げられるかデータが存在しない扱いになります(そのアプリが API 結果から除外された List や null になる)。 「他アプリの情報を取得する」という定義がやや曖昧ですが、 自アプリの情報を取得する暗黙的Intentを用いて startAc
Announcing AWS IAM Identity Center APIs for visibility into workforce access to AWS
Announcing List Assignment APIs for AWS IAM Identity Center, enabling you to view who has access to what AWS accounts and applications. With these APIs, you can list all AWS accounts and applications that a specific user or group can access. You can use the API response in workflows to generate periodic reports and audit your employee access to AWS, saving time and effort you previously spent on m
Monitor your GitHub Actions workflows with Datadog CI Visibility
Looking for Datadog logos? You can find the logo assets on our press page.
How Microsoft is expanding cloud logging to give customers deeper security visibility | Microsoft Security Blog
In response to the increasing frequency and evolution of nation-state cyberthreats, Microsoft is taking additional steps to protect our customers and increase the secure-by-default baseline of our cloud platforms. These steps are the result of close coordination with commercial and government customers, and with the Cybersecurity and Infrastructure Security Agency (CISA) about the types of securit
CSSのvisibilityプロパティを使って非表示の親要素の中で子要素だけ表示する方法を紹介しています。 See the Pen CSS | visibility by yochans (@yochans) on CodePen. 非表示の親要素の中で子要素だけ表示するCSSで要素を非表示にする方法は「display: none;」「opacity: 0;」などもありますが、これらは親要素で指定した場合は子要素で非表示を解除できません。 「display: none;」「opacity: 0;」は、親要素のプロパティであり、親要素が非表示になっている以上は子要素では解除できないからです。 親要素で非表示にして特定の子要素だけ表示したい場合は、visibilityプロパティを利用します。 visibilityプロパティも要素を非表示にすると、子要素も非表示になりますが、プロパティのスタイル
SEO Visibility Shifts from Review Sites to eCommmerce & User-Generated Content Sites in 2024
Several recent Google algorithm updates and other adjustments to Google’s algorithms have led to substantially different search results in mid-2024 compared to the prior year. Google launched a number of significant, confirmed updates – most notably, the September 2023 Helpful Content Update and March 2024 Core Update – which reduced “unhelpful” content in the search results by 45%, while simultan
Preparing your Gradle build for package visibility in Android 11
Preparing your Gradle build for package visibility in Android 11 Posted by David Winer, Product Manager One of the central themes for Android 11 has been protecting user privacy. On Android 10 and earlier, you could query the full set of installed apps using methods like queryIntentActivities(). Often, however, this approach provides much more access than most apps need to implement their function
【つまづき】Safariがbackface-visibilityに正式対応してないんですね^^; - Little Strange Software
どうも！LSSです！！ CSS等の動作テスト用iPhoneが欲しいなーと思いながら、未だに入手していません。 iPhoneの標準ブラウザ「Safari」がいくつかのCSSの実装が間に合っていなかったり、解釈が違ったりするから、なんですが、また新たにこのブログで使っていたネタの不具合が見つかりました。 最近よくLSSのブログのネタを使っていただいている、noriko(id:non704)さんのところで分かったのですが、 non704.hatenablog.com こちらのコメントに、LSSのところにもよくコメントを下さっている421miyako(id:m421miyako)さんのコメントで、裏側が反転して見えてしまう、という現象が！ transform:rotateY(180deg); で裏返した要素は、デフォルトでは裏側からみたように反転してみえます。 こんな感じ <span style=
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
Using Amazon CloudWatch Lambda Insights to Improve Operational Visibility | Amazon Web Services
AWS News Blog Using Amazon CloudWatch Lambda Insights to Improve Operational Visibility To balance costs, while at the same time ensuring the service levels needed to meet business requirements are met, some customers elect to continuously monitor and optimize their AWS Lambda functions. They collect and analyze metrics and logs to monitor performance, and to isolate errors for troubleshooting pur
Amazon SageMaker Autopilot – Automatically Create High-Quality Machine Learning Models With Full Control And Visibility | Amazon Web Services
AWS News Blog Amazon SageMaker Autopilot – Automatically Create High-Quality Machine Learning Models With Full Control And Visibility Update September 30, 2021 – This post has been edited to remove broken links. Today, we’re extremely happy to launch Amazon SageMaker Autopilot to automatically create the best classification and regression machine learning models, while allowing full control and vi
Using CSS content-visibility to boost your rendering performance - LogRocket Blog
Using CSS content-visibility to boost your rendering performance Rob O'Leary Rob is a solution architect, fullstack developer, technical writer, and educator. He is an active participant in non-profit organizations supporting the underprivileged and promoting equality. He is travel-obsessed (one bug he cannot fix). You can find him at roboleary.net. content-visibility is a CSS property that contro
Increase application visibility and governance using AWS Service Catalog AppRegistry | Amazon Web Services
AWS Cloud Operations & Migrations Blog Increase application visibility and governance using AWS Service Catalog AppRegistry Many customers deploy applications with a multitude of resources using AWS CloudFormation templates. As customers begin to scale, these templates are often re-used across multiple applications. At this point, important tasks like identifying deployed applications and unders
Terraform Gains Visibility, Self-Service, and Compliance Upgrades
TerraformInfrastructure as code provisioning
Photo by Jametlene Reskp on UnsplashSince most modern browsers are tabbed, it’s possible that a webpage may reside in a tab that stays in the background and not visible to the user. The Page Visibility API can provide us with insight as to whether a page is visible to the user. In this article, we’ll look at the Page Visibility API, its use cases, and how to use it. Visibility Change…
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの新しいプロパティ「content-visibility」レンダリングのパフォーマンスが向上する
意外と知らないvisibilityの活用方法！ | フロントエンドBlog | ミツエーリンクス
CodeSee – Bring visibility to your codebase
Android 11 の Package Visibility に関する変更への対応
CSS | visibilityで非表示の親要素の中にある子要素だけ表示する | 1 NOTES
content-visibility - CSS: カスケーディングスタイルシート | MDN
Introducing the Page Visibility API
news.yahoo.co.jp
gravure-grazie.com
flovel.thebase.in
jump-dream-room.hatenablog.com
maroonwebstore.stores.jp
ja.wiktionary.org