Where do Browser Styles Come From?

Summary

このビデオスクリプトは、CSSリセットやNormalize.cssのようなツールの役割と、ブラウザが提供するデフォルトスタイル（ユーザーエージェントスタイル）について説明しています。デフォルトスタイルは、ページの可読性を確保するためにブラウザによって提供され、異なるブラウザ間で一貫性を保ちます。しかし、これらのスタイルはブラウザによって異なるため、リセットやノーマライザーを使用して更新することがあります。スクリプトでは、ブラウザデフォルトを確認する方法と、開発者ツールでブラウザスタイルを表示する方法についても紹介しています。

Takeaways

• 🎨 CSSリセットやNormalize.cssのようなツールは、ブラウザ間でのデフォルトスタイルの一貫性を確保するために使用されます。
• 🔍 ブラウザのデフォルトスタイルは、ユーザーエージェントスタイル（UAスタイル）とも呼ばれ、各ブラウザが提供するものです。
• 📝 ブラウザは、ページを読みやすいように、特定のHTML要素にスタイルを提供します。
• 🌐 ブラウザのデフォルトスタイルは、異なるブラウザ間で微妙に異なりますが、古いウェブサイトにも対応する必要があるため、変更されません。
• 🛠️ CSSリセットやノルマライザは、ブラウザが提供するスタイルを更新するために使用されますが、全てのデフォルトスタイルを除去することはありません。
• 🔎 ブラウザのデフォルトスタイルを確認するには、開発者ツールのインスペクターで「ブラウザスタイルを表示」を選択します。
• 📊 「計算済み」パネルでブラウザスタイルを表示すると、要素に適用されている全てのCSSプロパティがわかります。
• 🔗 Firefoxなどのオープンソースブラウザのユーザーエージェントスタイルシートは、公式ウェブサイトで公開されています。
• 📚 Internet Explorerのパブリックスタイルシートはまだ見つかりませんが、Chromiumへの移行が進む中で、公開されることでしょう。
• 💬 ブラウザのデフォルトスタイルを理解し、カスケードの中でどのように機能するかを視覚化することは、ウェブサイトのスタイリングに非常に役立ちます。

Q & A

CSSリセットとは何ですか？

CSSリセットは、異なるブラウザで一貫性を保ちながら、ページのデフォルトスタイルをリセットするためのツールです。例えば、Eric MeyerのCSSリセットやNormalize.cssがあります。

ブラウザデフォルトスタイルとは何ですか？

ブラウザデフォルトスタイル、またはユーザーエージェントスタイル（UAスタイル）は、ブラウザが提供する、ページを読みやすいようにするための標準スタイルのセットです。

ユーザーエージェントとは何を指しますか？

ユーザーエージェントは、ブラウザを指す技術用語です。

ブラウザデフォルトスタイルを無効にする方法はありますか？

ブラウザデフォルトスタイルを無効にするには、CSSリセットやノーマライザーを使用することができます。ただし、全てのデフォルトスタイルを除去することは一般的ではありません。

ブラウザデフォルトスタイルを確認する方法はありますか？

ブラウザの開発者ツールで、ブラウザスタイルを表示することで確認できます。開発者ツールの設定から「ブラウザスタイルを表示」を選択することで、デフォルトスタイルを確認できます。

開発者ツールの「計算済み」パネルでブラウザスタイルを表示する方法は？

「計算済み」パネルで、ブラウザスタイルを表示するには、「ブラウザスタイル」を選択してオンにします。これにより、要素に適用されている全てのCSSプロパティが表示されます。

ブラウザデフォルトスタイルを直接閲覧するにはどうすればよいですか？

ブラウザデフォルトスタイルを直接閲覧するには、開発者ツールの「ルール」パネルから「html.css」をクリックするか、ブラウザのユーザーエージェントスタイルシートのリンクに直接アクセスします。

Firefoxのユーザーエージェントスタイルシートのリンクはどこで見つけることができますか？

Firefoxのユーザーエージェントスタイルシートのリンクは、開発者ツールの「html.css」をクリックすることで開くことができます。また、Mozillaのウェブサイトでも公開されています。

Chromiumブラウザのユーザーエージェントスタイルシートはどこで見つけることができますか？

Chromiumブラウザのユーザーエージェントスタイルシートは、公開されているため、オンラインでアクセスできます。

Internet Explorerのユーザーエージェントスタイルシートはどこで見つけることができますか？

Internet Explorerのユーザーエージェントスタイルシートは現在公開されていませんが、Chromiumに移行しているため、将来的には公開されることになります。

CSSのカスケードとブラウザデフォルトスタイルの関係は何ですか？

CSSのカスケードは、スタイルの優先順位を決定する仕組みです。ブラウザデフォルトスタイルは、カスケードの最下部に位置し、ユーザーが追加したスタイルによってオーバーライドされることがあります。

Outlines

00:00

🎨 CSSリセットとブラウザデフォルトスタイル

CSSリセットやNormalize.cssなどのツールを使用して、異なるブラウザ間で一貫性を保つためにデフォルトスタイルを統一する方法について説明されています。ブラウザが提供するデフォルトスタイル（ユーザーエージェントスタイル）は、ページの可読性を確保するために役立ちますが、異なるブラウザで微調整が必要な場合があります。リセットやノーマライザーはブラウザが提供するスタイルを更新するために使用されますが、すべてのブラウザデフォルトを削除することはありません。ブラウザデフォルトスタイルを確認する方法や、開発者ツールでブラウザスタイルを表示する方法についても触れられています。

05:01

🔍 ブラウザデフォルトスタイルの詳細な確認方法

ブラウザデフォルトスタイルを確認する方法について詳しく説明されています。開発者ツールでブラウザスタイルを表示する方法や、ユーザーエージェントスタイルシートへのリンクを提供する方法が紹介されています。また、Firefoxのユーザーエージェントスタイルシートの例を用いて、ブロックレベルの要素やテーブルのスタイルなど、ブラウザが提供するスタイルの詳細についても説明されています。他のオープンソースブラウザのユーザーエージェントスタイルシートもオンラインで公開されており、Internet ExplorerのスタイルシートもChromiumへの移行に伴い公開される予定です。

Keywords

💡CSS

CSS（カスケーディングスタイルシート）は、Webページのスタイルを定義するための言語です。このビデオでは、CSSを使用してブラウザのデフォルトスタイルをリセットまたはノーマライズする方法について説明されています。CSSを使用することで、ウェブページの外観をコントロールし、異なるブラウザ間での一貫性を確保できます。

💡リセット

リセットとは、ブラウザのデフォルトスタイルを初期化することを指します。これにより、ウェブページのスタイルをよりコントロールし、異なるブラウザで同じ外観を維持することができます。リセットは、CSSの基本的なスタイルを変更することで行われます。

💡ノーマライズ

ノーマライズは、ブラウザのデフォルトスタイルを一貫性のある状態に保つために、一部のスタイルをリセットするプロセスです。ノーマライズは、リセットと似ていますが、より微妙なスタイルの調整を行います。

💡ブラウザデフォルト

ブラウザデフォルトとは、ブラウザが自動的に適用するスタイルの設定です。これらのスタイルは、ユーザーエージェントスタイル（UAスタイル）と呼ばれ、ウェブページが読みやすいように設計されています。

💡ユーザーエージェントスタイル

ユーザーエージェントスタイル（UAスタイル）は、ブラウザが提供するデフォルトのCSSスタイルです。これらのスタイルは、Webページが読みやすいようにブラウザによって自動的に適用されます。

💡インスペクター

インスペクターは、ウェブ開発者ツールの一部で、HTML要素やCSSスタイルを視覚的に検査し、編集するためのツールです。このビデオでは、インスペクターを使用してブラウザデフォルトスタイルを表示する方法が説明されています。

💡コンパイルドパネル

コンパイルドパネルは、ウェブ開発者ツールの機能で、要素に適用されているすべてのCSSスタイルを表示します。このパネルを使用して、ブラウザデフォルトスタイルと開発者が適用したスタイルを比較できます。

💡ルールパネル

ルールパネルは、ウェブ開発者ツールの機能で、特定の要素に適用されているCSSルールを表示します。このパネルを使用して、ブラウザデフォルトスタイルを含めたすべてのスタイルルールを確認できます。

💡ユーザーエージェントスタイルシート

ユーザーエージェントスタイルシートは、ブラウザが提供するデフォルトのCSSスタイルを含むファイルです。これらのスタイルシートは、ブラウザのバージョンに応じて異なりますが、公開されているため、開発者が直接参照できます。

💡カスケード

カスケードは、CSSスタイルの優先順位を決定するプロセスです。ブラウザデフォルトスタイル、ユーザーのスタイル、そして開発者が指定したスタイルがカスケード順に適用され、最終的なスタイルが決定されます。

Highlights

CSS resets and normalization tools, like Eric Meyer's CSS reset and Normalize.css, are used to standardize default styles across different browsers.

Browsers provide a set of default styles, known as user agent styles or UA styles, to make web pages readable.

User agent is the technical term for a browser.

Browser defaults are consistent over time to support both old and new websites.

Resets or normalizers are used to update browser defaults without completely removing them.

Some browser defaults, like block display for paragraphs and inline display for links, are kept for usability.

Inspecting elements in a browser can reveal the impact of browser defaults on a site's styling.

Browser Inspector settings can be adjusted to show browser styles alongside custom styles.

The Computed panel in the Inspector can display all properties applied to an element, including browser defaults.

User agent style sheets can be accessed directly to view the default styles applied by the browser.

Firefox's user agent style sheet is publicly available and can be viewed in the browser or on the Mozilla website.

Other open-source browsers like Chromium and WebKit also have publicly available user agent styles.

Internet Explorer's user agent style sheets are not publicly available but will likely be as they transition to Chromium.

Understanding and visualizing browser defaults in the cascade is useful for web development and styling.

The transcript provides insights into how browser defaults can be managed and utilized in web design.

The speaker encourages viewers to engage with the content by leaving comments and exploring web styling.

Transcripts

(digital beeps)

- If you've written very much CSS,

you've likely run into a reset

like Eric Meyer's CSS reset here

or a normalizer like Normalize.css.

There's all sorts of resets and normalization tools

out there, and they're a little bit

like preparing the canvas as a painter,

trying to get our defaults to a good place

where they're consistent across different browsers.

Now, if you've ever looked at a website without styles,

and we can do that by going to View, Page Styles, No Style,

you can see that the browser provides this set

of default styles for us.

And we sometimes refer to these as browser defaults

or user agent styles.

User agent is a term that just refers to the browser.

It's the technical term for the browser.

So sometimes we'll call these user agent styles

or UA styles, UA style sheets.

If you hear those terms, what we're talking about

is the browser defaults.

Every browser provides this set of default styles

that make the page readable.

And of we look at the same page with those removed,

what we're seeing is the specification defaults

for each property, so display, inline, font weight, normal.

So we can see here, it looks like just one long block

of text, not very readable and not very useful.

Those defaults make sense in sort of an abstract,

but once we get to specific HTML elements,

the browser provides those styles

that give us bullet points on lists

and a little bit of padding there

and borders around our search box

and a button style and different sizes of heading,

space between paragraphs, and some things are blocked,

and some things are inline.

We get link styling, various types of link styling.

These are really useful defaults,

but they're a little bit different from browser to browser,

and some of them come out of the fact

that browsers can't really change

their defaults very option.

They have to support old websites as well as new websites.

So mostly these browser defaults don't change

over the course of time,

and so sometimes we're using a reset or a normalizer

to update what the browser is giving us.

But we don't generally remove all of the browser defaults.

It's useful to have paragraphs and lists be display block

and links be display inline and have underlines.

So there's various of those that we're going to leave in place

even though we build on top of them.

So I want to show you how we can see the browser defaults

and what impact they're having on our site.

So I'm going to start by inspecting this navigation.

We can see that I've got a list here,

and I've set margin to zero, padding to zero,

list-style, none,

but I'm not seeing here any of the defaults

that the browser would normally provide,

and that's because they're turned off

in the Inspector by default.

So what I'm going to do is go to this three dots,

this dropdown menu, go to Settings,

and if I scroll down to Inspector,

I can see Show Browser Styles,

and I'm going to turn that on and go back to my Inspector.

And now we can see my margin, my padding, my list style,

and if we scroll down just a little bit,

we see user agent html.css,

and we can see that there's a counter reset there.

List-style-type:disc, I've overridden that,

and there's a few more things

that the user agent style sheets provide.

The same is true if I select the body element here.

I have a display grid and a margin of zero,

and we can see here the user agent style

that that's overriding.

So that's a display of block and a margin of eight pixels.

We can actually click one of these to filter

and see just everywhere that display is being set

on the body.

So that's a quick way to find what we're looking for.

We can also see browser styles in the Computed panel.

If we go here to Computed,

by default we see only the styles that I've applied directly

to the body, but I can select this Browser Styles,

turn that on, and now I'm seeing every single property

that's applied to this element.

That's every property in CSS that might be relevant here.

And we can see that most of them are just the defaults,

and if we scroll, we might find some

that have this little triangle,

and that triangle means

that something has been set explicitly.

And in this case, I set the border box to screen.

We can filter this, as well.

So I'll filter that down to margins,

and here, looking at the margin-bottom,

we can see that I've set it to zero pixels,

and the browser also set it to eight pixels.

We can see browser or user agent default styles

both in the Computed panel and in the Rules panel

if we turn them on.

They're not turned on by default.

If you're like me and you want to go deeper,

you want to see every single style

that the browser is applying to your entire page,

the quick way to get there is we can actually just click

on this where it says html.css,

either here or in the Rules panel.

If we click on that, it's going to open this file,

which you can also go to directly.

I'll post the link below.

And this is the user agent style sheet itself.

This is Firefox user agent style sheet.

Starts with a lot of bidirectional styles.

We get to the block section

where we set all these block level elements

to display block, including the body,

which also gets that margin of eight pixels,

paragraphs, block quotes, figures, et cetera,

and there's a lot doing on in here.

We can see use of selectors that aren't very familiar yet

but hopefully will be.

Here's all the styles for tables, et cetera, et cetera.

That's the link for getting to the user agent styles

in Firefox itself

in whatever version of Firefox you're using.

If you're not actually in Firefox,

that source code is public.

So you can go to this link,

and you'll see that same style sheet here

on the Mozilla website.

The same is true for other opensource browsers.

Chromium browsers have their user agent styles

publicly online, and the same is true for WebKit.

WebKit is the code behind Safari.

I haven't been able to find public style sheets

for Internet Explorer, but as they're moving over

to Chromium, those will become available soon.

But whether you're looking at these style sheets directly

or turning them on in the Inspector

and being able to visualize how they fit in the cascade

with your other styles, that's all very useful as we work.

So hopefully that's helpful.

I'd love to hear your thoughts.

Leave comments below, and have fun styling the web.

(upbeat digital music)