PUBLIC MARKS from decembre with tag css

Pour tous ceux qui aiment fouiller, des milliers de ressources photos, sons, vidéos classées par thématique. Vérifier les informations concernant les utilisations commerciales en fonction des copyrights.

I have an huge Style , impossible (for me) to compress more to publish here ... I want find a way to convert it , automatically if it is possible, into an greasemonkey .

I see no documentation about this and I have few suggestions about it. I think this is a must-have feature for the freedom of users. A user should be able to install styles from other sources. Example: User goes to www.example.com User clicks on the link (www.example.com/name_of_the_style.user.css) Stylish detects the link by ".user.css" component Stylish shows a dialog: "Would you like to add this site to allowed domains list?" └► This dialog is only shown once and shown when it is required └► Domains can be removed/set/added from User Styles tab in about:addons User clicks "Yes" Stylish shows another dialog "Would you like to install this style?" User clicks "Yes" The style is installed.

Users can currently install from other sources in these ways:Modify the setting extensions.stylish.install.allowedDomains in about:config and visit a site that implements the appropriate meta elements and something like this JavaScript and use its UI (supports metadata).

Yes, I know the new transparent style is cleaner, simpler, etc. but I LOVED having the progress bar visible while I was watching the video. I tried for a couple days to find a workaround, and it looks like I found one! You will need to have both Stylish and Tampermonkey installed. I installed these 2 Stylish styles for Youtube: Youtube Player August 2015 Youtube Controls Under Player I also installed these two userscripts on Tampermonkey: Youtube New UI Fix Youtube Progressbar Updater

The @font-face CSS at-rule allows you to define and use your own custom fonts, thus allowing you to extend the limited set of standard system fonts that are installed by default on a computer, and that browsers can access and use.

The will-change property allows you to inform the browser ahead of time of what kinds of changes you are likely to make to an element in order to allow the browser to optimize how it handles the element ahead of time. Using will-change, you allow the browser to prepare for certain changes that are likely to take place in the future, ahead of time. This allows it to make appropriate optimizations to render the page more quickly when these changes occur, therefore avoiding a non-trivial start-up cost which can have a negative impact on the responsiveness of a page. This way, when the actual change happens, the page updates in a snappy manner.

CSS3 3D Transforms Method of transforming an element in the third dimension using the `transform` property. Includes support for the `perspective` property to set the perspective in z-space and the `backface-visibility` property to toggle display of the reverse side of a 3D-transformed element.

CSS3 object-fit/object-position Method of specifying how an object (image or video) should fit inside its box. object-fit options include "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio), where object-position allows the object to be repositioned like background-image does.

ss16 - a self-centered, fresh attempt at (user)styling 4chan * * created on: February 11th, 2016 * last modified: May 16th, 2017 * 4chan X version: ccd0 1.13.89.3 / https://github.com/ccd0/4chan-x * created by: @saxamaphone69 * (loose) coding style: https://github.com/necolas/idiomatic-css * * in an attempt to make the style as user-friendly as possible, i will * comment most of the css to explain what it all does * * please leave any comments, suggestions, or feedback on github: * https://github.com/saxamaphone69/ss16 * */ /** * this userstyle utilises a lot of best practices * and sensible defaults inspired from a variety of * stylish and modern web frameworks and resources, mainly: * https://github.com/twbs/bootstrap */ /** * first thing we do, is we use web fonts from google! * this is so users aren't required to download fonts prior. * and of course, if you don't want to or don't like it, * delete or change it accordingly. we use roboto, roboto mono, * karla, and material icons. circular has been removed in the production * version of ss16 to not only keep the file size down, but also * to not have a font that i don't own the license for :^) */

FirefoxCSS

Firefox 57 or Stylish 3.0 users: - Expand the "Show CSS Code" panel - Copy/paste into a userChrome.css file. More information on creating a userChrome.css file:

/* * Edit this file and copy it as userChrome.css into your ff profile */ /* Show TAB favicon only on selected tab */ #feed-button { display: none !important } #urlbar[level] .autocomplete-textbox-container >* { background-color: #FFFFB7 !important; } .autocomplete-history-dropmarker { display: none !important; } /* Hide Tabbar close Button */ /* tabbrowser .tabs-closebutton-box { display: none; } */ /* PERSONAL TOOLBAR */ /* * Note: Rules affecting icons on the PT do not apply to folder contents. * Those are governed by "Bookmarks menu" rules. * Taken from: http://www.mozilla.org/unix/customizing.html#usercss */ /* Kill FOLDER / bookmark icons in the Personal Toolbar */ toolbarbutton.bookmark-item > .toolbarbutton-icon { display: none; } /* BOOKMARKS MENU */ /* OK - kill icons for bookmark groups in Bookmarks menu */ menuitem.bookmark-group > .menu-iconic-left { display: none; } /*hide noscript icon in contextual menu*/ .menu-iconic[id*="noscript-"] > .menu-iconic-left .menu-iconic[class*="noscript-"] > .menu-iconic-left .menuitem-iconic[class*="noscript-"] > .menu-iconic-left { visibility: hidden !important; } /* TABS */ .tabbrowser-tab[selected="true"] { border: none !important; font-family: "pragmata" !important; border-radius: 0 !important; padding-left: 5px !important; padding-right: 5px !important; background: red !important; } .tabbrowser-tab:not([selected="true"]) { border: none !important; font-family: "pragmata" !important; background: #222 !important; border-radius: 0 !important; padding-left: 5px !important; padding-right: 5px !important; } { -moz-appearance: none !important; } #content browser{margin-right:-16px!important;overflow-y:scroll;overflow-x:hidden;} .appmenu-button-container { background: #303030 !important; } #navigator-toolbox #TabsToolbar, { background: #303030 !important; } #appmenu-toolbar-button, .tabbrowser-tab { font: 10pt "pragmata" !important; background-color: #303030 !important; text-shadow: none !important; color: #676767 !important; } #urlbar { height: 22px; } .appmenu-toolbar-button { background: #303030 !important; color: #676767 !important; text-align: left !important; margin: 0 3px 0 0px !important; padding: 0 0 0 0 !important; } .toolbarbutton-menu-dropmarker { display: none !important; } #navigator-toolbox #TabsToolbar { background: #303030 !important; padding: 0px 0px !important; height: 20px !important; } .tabbrowser-tab { text-align: center !important; color: #676767 !important; background: #303030 !important; margin: -2px 0px 0px 0px !important; padding: 0px 2px 0px 4px !important; border: 0 !important; border-left: 0px solid #676767 !important; border-right: 0px solid #676767 !important; border-radius: 0px !important; } .tabbrowser-tab[selected="true"] { /*background: #202020 !important;*/ background: red !important; border-left: 0px solid #676767 !important; border-right: 0px solid #676767 !important; padding: 0px 2px 0px 3px !important; color: #ababab !important; }

'about:config' tweaks (To revert changes right-click entry and select 'reset'): - Tab audio icon browser.tabs.showAudioPlayingIcon - Insert related tab after current tab (suggestion: enable / set to 'true') browser.tabs.insertRelatedAfterCurrent - Titlebar browser.tabs.drawInTitlebar - Searchbar: open search results in new tab browser.search.openintab - Reader mode reader.parse-on-load.enabled - Geolocation (suggestion: disable / set to 'false') geo.enabled - Pocket (suggestion: disable / set to 'false') extensions.pocket.enabled - Anti fingerprinting (Caution: browser might behave in unforseen ways!) privacy.resistFingerprinting read: Fingerprinting info at Mozilla Wiki tweaks ***** Suggested ui tweaks ***** - Toolbar modes (suggestion: compact mode) Customize mode > Density > Compact / Normal / Touch - Titlebar modes (suggestion: Firefox titlebar ['application/hamburger button in titlebar' only works in Firefox titlebar]) Customize mode > Title Bar > uncheck checkbox Drag space above tabs toolbar (suggestion: disable drag space ['application/hamburger button in titlebar' works best without drag space]) Customize mode > Drag Space > uncheck checkbox Bookmarks menu button on bookmarks toolbar Customize mode > Toolbars > Bookmarks Toolbar Customize mode > move 'bookmarks menu' button to bookmark toolbars end Downloads button always visible Customize mode > downloads button > click on button and uncheck 'Auto-hide' Searchbar (suggestion: placed after location bar) Customize mode > Search(bar) > move to navigation toolbar Flexible spaces (suggestion: remove spaces after and before location bar) Customize mode > grab and drag flexible space into palette

Generators: A range of tools with easy-to-use interfaces for generating code

This post will cover six popular tips for Chrome DevTools. You may have seen some of these before, but hopefully if you have they'll act as a refresher for what you can do during your Inspect Element journey.

Textarea Tricks , 2010

A thin modern-looking scrollbar for all sites. Just as easy to use as the normal one but uses less screen space.

userChrome.css is a style sheet with special importance to Firefox. The rules in userChrome.css are applied to the user interface, and can override nearly every built-in style rule. Unfortunately, you cannot use userChrome.css to change the functional operation of Firefox; that's what extensions are for. Creating a userChrome.css file and adding style rules allows you to make changes to fonts and colors, hide unnecessary items, adjust spacing, and make other changes to the appearance of Firefox. The following examples illustrate the wide range of effects you can create, either by creating your own style recipes, or building on the work of CSS wizards sharing their talents on the web.

Before looking in detail at the various features offered by font-display, let’s briefly consider how you might use the feature in your CSS. First of all, font-display is not a CSS property but, as mentioned in the intro, it is a descriptor for the @font-face at-rule. This means that it must be used inside a @font-face rule, as showed in the following code: @font-face { font-family: 'Saira Condensed'; src: url(fonts/sairacondensed.woff2) format('woff2'); font-display: swap; } In this snippet I’m defining a swap value for the font Saira Condensed. The keywords for all the available values are: auto block swap fallback optional

The only way to modify UI is adding custom CSS code to userChrome.css and userContent.css files inside browsers profile folder. Keep in mind CSS code can not create entirely new items, buttons or toolbars. It only can modify already present ui items. 1. Find your profile folder ('profile names are different for everyone'). All OS: about:support > Profile Folder > Open Folder 2. User styles belong into "chrome" subolder. Create it, if there is none yet. PROFILENAME chrome 3. Copy userChrome.css, userContent.css and subfolders into chrome subfolder. How to use custom user styles? The userChrome.css and userContent.css files works like an optionsconfigurations file. All main "features" can be enabled and disabled there.

Is there something in JavaScript similar to @import in CSS that allows you to include a JavaScript file inside another JavaScript file?

First Visit RawGit as suggested earlier Next copy your file path from github into the RawGit box RawGit will automatically produce two refrences to your web page The Development and Production refrence refrence the development link in your webpage if you are still developing save/upload then reload your webpage if there was no change it means your browser has saved your former refrence clear your browser data then reload Hope that helps?

Users can currently install from other sources in these ways: Visit a CSS file, click the Stylish icon, click Add File to Stylish (no metadata will be loaded, but updates will work) From the Stylish tab in the Add-ons Manager, click Install from URL, and provide the URL to a CSS file (again, no metadata, but updates work) Modify the setting extensions.stylish.install.allowedDomains in about:config and visit a site that implements the appropriate meta elements and something like this JavaScript and use its UI (supports metadata). Use Install from URL and provide a URL that implements the appropriate meta elements. This way, the site does not need to implement any JS and does not need to be in extensions.stylish.install.allowedDomains (supports metadata) So basically the missing portion to achieve what you want is some way to more easily add a site to extensions.stylish.install.allowedDomains. I would also to give some thought as to how to prevent abuse of this feature. For example, there's nothing currently stopping a site from opening infinite prompts until the user installs.