public marks

PUBLIC MARKS from decembre with tag css

This month

FIR >57 - DEV - Firebug + FirePath alternative ? - Is there a CSS/XPATH checker, now that firefinder is gone? | Forum d’assistance Firefox | Assistance de Mozilla

(via)
The Developer Edition is the replacement for Firebug https://www.mozilla.org/en-US/firefox/developer/Yes, I know you can right click and copy the css or xpath, but thats not what I am asking. I am asking about the functionality that was provided by firefinder add on. Does FF offer that somewhere now that firebug was removed and added to the developer version.

CSS - FirePath :: Reviews :: Add-ons for Firefox

An alternative or Update ? Rated 5 out of 5 stars by decembre on Feb. 21, 2018 · permalink When i write an Userstyle it is (was) the primary tool i use with Firebug. Now i search an alternative for this great tool: The devtool don't give us the possibility to search or test a specific CSS selector like Firepath do. And in an other hand the DevTool is less useful than Firebug (it don't give an easy way to identify in which userstyle a CSS rule is - with an human reading way)

CSS - TEXT - A Call for ::nth-everything | CSS-Tricks

(via)
::nth-word() / ::first-word / ::last-word / ::nth-last-word() We currently don't have any word-based pseudo elements. We do have word-spacing though, which is notable. One use case is similar to using ::first-letter for drop caps, only doing a whole word. article p::first-word { float: left; font-size: 300%; margin: 0 10px 10px 0; }

CSS - text-align-last property

(via)
The text-align-last property specifies how to align the last line of a text. Note: The text-align-last property will only work for elements with the text-align property set to "justify".

CSS - CSS last-line: Controlling Widows & Orphanst - The new code –

“Widows” and “orphans” refer to a word or line of text that is laid out on the page in a way that disturbs reading flow and the “look” of the page: most commonly, words that are left dangling at the end of paragraphs. In paginated media, this is commonly seen as end-of-paragraph words that fall onto the next page. TRADUCTION: "Veuves" et "orphelins" se réfèrent à un mot ou une ligne de texte qui est disposé sur la page d'une manière qui perturbe le flux de lecture et le "look" de la page: le plus souvent, les mots qui restent à la fin de paragraphes. Dans les médias paginés, ceci est généralement vu comme des mots de fin de paragraphe qui tombent sur la page suivante

DEV - TUTO - the new code – Web Developer Reading List: CSS Typography

A well-known dictum states that web design is 95% typography. Despite the prevalence of rich media, videos and games, people come to the web primarily to read. Making that reading experience comfortable, interesting and enjoyable is a major factor in keeping people on web sites longer and enhances their ability to retain and remember information. Goals: Control the display of web page text to enhance communication. Prerequisite: Color Total time: 8 hours

CSS - ONLINE TOOL - Clippy — CSS clip-path maker

(via)
The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.

IMAGE / CSS / ICON etc ....- AllTheFreeStock.com - Free Stock Images & Videos ~

by 1 other
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.

January 2018

USERSTYLES - JAVASCRIPT - Convert an Userstyle into a greasemonkey script ? - forum.userstyles.org

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 .

USERSTYLE - REQUEST (2013 / Closed 2014) - Installing user styles from different sources & Style metadata · Issue #165 · stylish-userstyles/stylish · GitHub

(via)
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.

USERSTYLES - javascript - userstyles/install.js · GitHub

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).

VIDEO - TWEAK - For anyone who wants the progress bar always visible with the new style... : youtube

(via)
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

CSS - @font-face | Codrops CSS Reference

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.

CSS - will-change | Codrops CSS Reference

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.

CSS- transform-style | Codrops CSS Reference

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.

CSS - object-position | Codrops CSS Reference

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.

December 2017

USERSTYLES - EXAMPLE - ss16 a Fresh attempt at (user)styling 4chan.... (2017)

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 :^) */

USERSTYLES - FIR 75 > - CSS - Jefferson - Stylish themes & skins | Userstyles.org

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:

FIR 57 - MY CustomCSS (userChrome.css ) - General discussions, feedback, questions belong here (v3) · Issue #88 · Aris-t2/CustomCSSforFx · GitHub

/* * 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; }

FIR 57 (UserCSS + about:config) - Custom CSS tweaks for Firefox 57+ - GitHub - Aris-t2/CustomCSSforFx:

'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

DEV - CHROM - 2015 - Six Tips for Chrome DevTools | CSS-Tricks

(via)
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.

November 2017

CSS - SCROLLBAR - Modern custom scrollbar (effects all websites) | Userstyles.org

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