public marks

PUBLIC MARKS from decembre with tag css

This month

WATERFOX - ABOUT:CONFIG - To disable Stylo in Waterfox 56.1.0- Do not forget to enable Stylo(Quantum CSS).... : waterfox

(via)
If you have prolem, you can test that: To disable Stylo in Waterfox 56.1.0: >about:config >SEARCH : layout.css.servo. > CHANGE layout.css.servo.enabled TO false – then either (a) reload any page that may be bugged by Stylo in 56.1.0; or (b) restart Waterfox.

March 2018

CSS - ONLINE TOOL - Irregular Shape Creator [CodePen]

Customize Border Radius and Size. And Copy and paste in your css

DEV - Great Resources Every Beginning a Front-end Developer Should Bookmark by vydargis on CodePen

If you just get started your a front-end developer career, it might be overwhelming to learn something every day. To optimize your time, it might be useful to know solid resources, to keep up with a demanding programmers’ environment. In this brief article, you will find 6 useful resources that in my opinion I think every beginning a front-end developer career should bookmark.

CSS - TRICK - :not([class]) - - :not(s) | CSS-Tricks

(via)
Another useful one (especially when setting up defaults that you expect to be overridden by classes) is :not([class]). It only styles the element if it has no classes assigned to it at all. :)

CSS - ONLINE TOOL - Smooth corners with CSS Houdini - @iamvdo

(via)
CSS Painting API - CSS Custom Properties C+ CSS Properties and Values API Better rounded rectangle by drawing a superellipse. Read blog post

CSS - FONT - Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira

(via)
Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.

February 2018

DEV - FORMATION - Thimble par Mozilla — Un éditeur de code en ligne pour apprendre et enseigner

(via)
Thimble est un éditeur de code en ligne qui facilite la création et la publication de vos propres pages web tout en apprenant le langage HTML, CSS et le JavaScript

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