Свойства css для firefox

Saved searches

Use saved searches to filter your results more quickly

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.

Collection of userstyles affecting the browser

License

MrOtherGuy/firefox-csshacks

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

This patch uses browser.fullscreen.autohide to detect if toolbars should hide - and if so then tabs toolbar is hidden unless hovered.

Git stats

Files

Failed to load latest commit information.

README.md

Collection of random CSS hacks for Firefox

This repository contains various styles to modify appearance of Mozilla Firefox. These stylesheets are mostly self-contained and can be mixed with each other somewhat freely, but there are no promises about compatibility with third-party styles.

In the case that a particular style relies on another style, the fact will be noted at the start of the file that requires so.

Stylesheets in this repository are tested only on Windows 10 and to a lesser amount on Linux. Most of them should also work on OSX and Windows7, but there may be wrong behavior especially when native widgets such as window titlebar or window control buttons are being styled.

As an overview, you will make Firefox load two special stylesheets — userChrome.css and userContent.css . Doing so requires setting a specific preference (see below) and then creating those files inside your Firefox user profile.

The setup is quite straightforward with the exception of how to find the profile folder so pay attention to that.

Set the pref to load stylesheets

Go to about:config and set the pref toolkit.legacyUserProfileCustomizations.stylesheets to true

After you set this pref, Firefox will try to load userChrome.css and userContent.css — but those files don’t exist yet so now let’s create them.

First, find your profile folder. While Firefox is running, go to about:support and find a Profile folder row near the top — there should also be a button labeled «Open folder» next to it. Clicking that button should open the folder in your file manager.

NOTE: On some Firefox versions clicking that button may open the profiles folder which houses all your profiles. In that case, navigate into the specific folder you wish to modify. about:support should still show the correct folder name so refer to that if you need to figure out the what folder you need to open.

The real profile folder should have files like prefs.js and places.sqlite If you see those two files in the folder, then great! You found the profile folder! Now lets actually create those stylesheet files.

Creating the stylesheet files

Note: only userChrome.css is mentioned in this section for brevity, but everything regarding that will also apply to userContent.css

Firefox loads userChrome.css from /chrome/userChrome.css . That chrome-folder or the stylesheet files do not exist by default.

1. Create a new folder into the profile folder and name it chrome
2. Create userChrome.css inside that newly created chrome-folder
3. Copy-paste contents of individual .css files from this repository into your userChrome.css file (and save it of course!)
4. If Firefox is running, restart Firefox so that the changes take effect

Pay attention to the filename of userChrome.css — the file extension must be .css and if your file manager is hiding file extensions then you might accidentally create a file named userChrome.css.txt and Firefox will not load that.

In the end you should have a folder structure like this:

 |_ chrome | |_ userChrome.css | |_ userContent.css |_ extensions |_ prefs.js . all other profile folders and files . 

Preferred way to do things, since it makes updates easier and makes organizing multiple styles easier.

Assumes that you have a git client installed, and that you do not already have a chrome folder in your profile.

1. Open a command prompt / console / terminal and cd into the profile folder
2. Clone this repository into the profile folder
   • git clone https://github.com/MrOtherGuy/firefox-csshacks.git chrome on command-line
   • This should create a new folder «chrome» into your profile folder with the contents of this repository
   • (NOTE: if you already have «chrome» folder, then rename it before cloning. After clone is complete, just copy the contents of the old folder into the new chrome folder)
3. (Optional) Make a copy of userChrome_example.css and rename the copy to userChrome.css
4. @import individual style files into your userChrome.css
   • Notice tha any @import s must be placed before anything else in whatever file you are using them
   • Check userChrome_example.css for how it uses @import
5. If Firefox is running, restart Firefox so that the changes take effect

Afterwards, you can just use git pull in the «chrome» folder and it will replace your copies with up-to-date versions. git pull won’t replace your userChrome.css file so you can safely put your own custom rules into userChrome.css directly and those won’t be overwritten when you update.

The files themselves are only separated to chrome and content sub-folders. Files have a one or more tag applied to them as listed in tags.csv file.

You can browse the tag-categorized files by using this UI

Stylesheets are divided in to chrome and content folders. Firefox loads userChrome.css into the browser UI and it loads userContent.css into the content documents like web pages and built-in or extension pages.

Use stylesheets under «chrome» in userChrome.css

Use stylesheets under «content» in userContent.css

The above is not a technical requirement but the particular styles generally won’t do anything when loaded in wrong context.

You can import the stylesheets with @-rule import like this:

@import url("path/filename.css");

A good habit would be to load each separate style without modifications using @import statements, and then apply your own modifications in userChrome.css after all imports. This makes it easier for you to update the files from the repository since your modifications will be preserved.

@import url(chrome/tab_close_button_always_on_hover.css); @import url(chrome/tab_loading_progress_throbber.css); @import url(chrome/button_effect_scale_onclick.css); :root< --toolbar-bgcolor: rgb(36,44,59) !important; --uc-menu-bkgnd: var(--toolbar-bgcolor); --arrowpanel-background: var(--toolbar-bgcolor) !important; --autocomplete-popup-background: var(--toolbar-bgcolor) !important; --uc-menu-disabled: rgb(90,90,90) !important; --lwt-toolbar-field-focus: rgb(36,44,59) !important; >

Note that all @import rules need to be placed before any other rules in the file, including @namespace rules. Additionally, the order of imported files is just as important as the order of rules within one file.

I would strongly advice using @import to include styles instead of copying contents directly to userChrome.css even with just a few file «components». The technical reason for this is that some files rely on @namespace rules and those only apply on file level such that a @namespace applies to every selector in that file (and in that file only). On top of that, @imports make managing multiple files much easier.

Further miscallaneous notes

Import any *_patch.css files after their base stylesheet. Import the shared window_control_support.css before other stylesheets.

Additionally, you are advised to import theme_ files before any other modules.

** NOTE ** Theme files are mostly out-of-date as of 2020-05-22

Stylesheets prefixed with theme_ require theme_color_variables.css to be imported.

Example userChrome.css resulting in rather complete dark blueish-grey UI:

@import url(theme_color_variables.css); @import url(theme_sidebar.css); @import url(theme_toolbars.css); @import url(theme_popups_and_menus.css); /* Your other rules here */

You can use individual modules from theme such as to only include popups_and_menus. But it would still be required that you import the theme_color_variables.css or you’ll have to manually edit all the colors.

About

Collection of userstyles affecting the browser

Источник

CSS хаки

Браузеры и стандарты. Вечная погоня. Из-за несоответствий стандартам, из-за разных способов рендеринга страниц большая часть времени веб-дизайнера уходит на то, чтобы загладить эти несоответствия (использовать хаки). В итоге, вместо эффективной работы, дизайнер вступает в противоестественные отношения с браузерами, теряя драгоценное время.

Кросс-браузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично.

Хак — исправление ошибки или добавление новой функции посредством использования другой недокументированной или некорректно реализованной особенности. (с) Lurkmore

Грязный хак — это быстрое решение какой-либо проблемы, в основном в краткосрочной перспективе, лишающее сущность код внутренней красоты и дисгармонирующее с её внутренним устройством. (с) Lurkmore

CSS-хаки для браузера Internet Explorer

PNG в IE6 :
Для IE6 подключается htc-файл iepngfix.htc, для правильной работы фоновых изображений формата PNG для всех элeментов, в файле cssf-ie6.css. Используется IE PNG Fix v1.0 RC4 последней версии.

html>body .class < >head+body .class < >html:first-child .class

*|html .class < >html:not([lang*=""]) .class

Conditional comments в IE :
Условные комментарии работают только в IE под Windows, для других браузеров они являются обычными комментариями, поэтому их можно безболезненно использовать. Синтаксис такой:

 
Читайте также:  Питон имена для переменных