火狐无法载入样式表_如何在Firefox中添加用户样式表

火狐无法载入样式表

While many like to complain about CSS these days, it's important to remember how amazing CSS is; the CSS language is:

尽管许多人最近都在抱怨CSS，但重要的是要记住CSS的惊人之处。 CSS语言是：

• easy to learn
  简单易学
• easy to read
  易于阅读
• easy to write
  容易写
• simple to understand
  简单易懂

Web developers and designers alike love that CSS allows us to take text/media and present it in a beautiful, logical fashion. While we love that we control our own sites, it's obvious that we don't always agree with other web developers' decisions, and would prefer to modify designs for the purposes of simple UI improvement or hiding ads, etc.

Web开发人员和设计人员都喜欢CSS使我们能够获取文本/媒体并以美观，合乎逻辑的方式呈现文本/媒体。 虽然我们喜欢控制自己的网站，但显然我们并不总是同意其他Web开发人员的决定，而是希望出于简单的UI改进或隐藏广告等目的而修改设计。

The amazing Firefox web browser allows users to create and include a user stylesheet into each page to allow the user to modify every single web page as necessary. Let me show you how to do it!

惊人的Firefox Web浏览器允许用户创建用户样式表并将其包含在每个页面中，以允许用户根据需要修改每个单个网页。 让我告诉你如何做！

步骤1：找到并打开配置文件目录 (Step 1: Locate and Open Profile Directory)

The user stylesheet will be added to your each user profile, not the browser code itself; this makes sense since each profile may want a different UI modifications. In the address bar, visit about:support and click Profile Folder's "Show in Finder" (or likewise) button:

用户样式表将被添加到您的每个用户配置文件中，而不是浏览器代码本身； 这很有意义，因为每个配置文件可能需要不同的UI修改。 在地址栏中，访问about:support ，然后单击配置文件文件夹的“在Finder中显示”(或类似的按钮)：

The directory will be opened on your system in Finder (Mac) or Explorer (Windows).

该目录将在Finder(Mac)或Explorer(Windows)中的系统上打开。

第2步：创建chrome目录 (Step 2: Create chrome Directory)

Create a chrome directory within the designated profile directory which will host the necessary userContent.css file:

在指定的配置文件目录中创建一个chrome目录，该目录将托管必要的userContent.css文件：

Having the userContent.css file in this directory will allow the user stylesheet to not be lost during Firefox upgrades.

在此目录中具有userContent.css文件将使用户样式表在Firefox升级期间不会丢失。

步骤3：建立userContent.css (Step 3: Create userContent.css)

Firefox adds the userContent.css file on every page, if it exists, so add userContent.css within the chrome directory. This file should host all modifications to any page you visit, so don't create overly broad CSS selectors which will apply to every website.

Firefox将在每个页面上添加userContent.css文件(如果存在)，因此请在chrome目录中添加userContent.css 。 此文件应包含对您访问的任何页面的所有修改，因此请勿创建过于宽泛CSS选择器，该选择器将应用于每个网站。

/* an overly aggressive style just to prove it works */
body {
  background: pink !important;
}

步骤4：更新about:config (Step 4: Update about:config)

In the address bar, open about:config and set the toolkit.legacyUserProfileCustomizations.stylesheets setting to true.

在地址栏中，打开about:config并将toolkit.legacyUserProfileCustomizations.stylesheets设置设置为true 。

步骤5：重新启动Firefox (Step 5: Restart Firefox)

User styles aren't applied to sites until you restart Firefox. Once Firefox has been restarted, the styles in your userContent.css will be applied to the page.

在重新启动Firefox之前，用户样式不会应用于网站。 Firefox重新启动后， userContent.css的样式将应用于该页面。

步骤6：显示浏览器样式 (Step 6: Show Browser Styles)

Lastly, open DevTools, click the three-dot menu, and choose "Settings". Under "Inspector", check the "Show Browser Styles" checkbox:

最后，打开DevTools，单击三点菜单，然后选择“设置”。 在“检查器”下，选中“显示浏览器样式”复选框：

奖励： userChrome.css (Bonus: userChrome.css)

While the userContent.css allows the user to set CSS for all page content, you can also create a userChrome.css file which is applied to the browser chrome.

尽管userContent.css允许用户为所有页面内容设置CSS，但是您还可以创建一个应用于浏览器chrome的userChrome.css文件。

The ability to easily create a user stylesheet to customize any webpage is another reason to love Firefox!

轻松创建用户样式表以自定义任何网页的能力是喜欢Firefox的另一个原因！

翻译自: https://davidwalsh.name/firefox-user-stylesheet

火狐无法载入样式表