public marks

PUBLIC MARKS from decembre with tag css

This month

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.

FIR - ADDON USERSTYELS - Forum reply about Stylus Permissions Required and Privacy - Stylus :: add0n.com

(via)
Forum reply about Stylus Permissions Required and Privacy (by NarcolepticInsomniac): Responding to this almost seems silly, since OP is clearly delusional, but I might as well clarify so that no one else is confused by this FUD. Stylus needs to monitor, and have the ability to modify all pages in order to detect which URLs have applicable styles, and then inject those stylesheets. If you had any clue what you were talking about, you'd recognize that pretty broad permissions are required for such functionality. The real issue is that these same permissions which are required for basic functionality can also be abused by adding telemetry or other garbage. The majority of extensions include some low level basic analytics for development purposes, and many go much further than that, collecting your complete browsing history with personally identifying info to create profiles. These profiles can then be bought and sold for targeted advertising purposes. That's what happened to Stylish when it was sold to an analytics company, and one of the main reasons we created Stylus was to rectify this abuse of permissions granted by users who trusted the previous dev. Stylus collects nothing. Period. Not even low level analytics for install counts or to help in development regarding which features warrant more attention. This is a pain in the ass for development, but also very important for instilling trust within our user-base. The code is completely open source, so anyone can review it. With many users actively involved in maintaining and improving it, rest assured that nothing sketchy can make its way into the actual code. I think it might be worth adding an explanation for each permission in README. Not that it will convince the most suspicious users by itself, but then again they can simply use WireShark or Fiddler to see what Stylus network communications are (answer: only style update checks when the corresponding option is enabled).

FIR - CSS - What is userChrome.css? What can it do?

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.

CSS - @font-face - CSS font-display: The Future of Font Rendering on the Web — SitePoint

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

October 2017

FIR 57>+ - userChrome.css / userContent.css - WebExtensions can not modify browsers appearance in Firefox 57+

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.

JAVASCRIPT - How do I include a JavaScript file in another JavaScript file? - Stack Overflow

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

USERSTYLES _ GitHub - Referencing a .css file in github repo as stylesheet in a .html file - Stack Overflow

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

USERSTYLES - HACK - extensions.stylish.install.allowedDomains chez DuckDuckGo

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.

USERSTYLES - DeviantArt Forum - 2014 - Installing UserStyles directly from dA – DeviantArt

(via)
Instead of having to get an userstyles.org account, it would be much easier to be able to install user styles directly from dA. The process for the upload could be similar to what we have with installable skins right now (based on .txt files with mandatory wrapping code). Imo it's also more logical if dA styles would stay on dA. No need to rely on outside sources. If implemented there needs to be an way to be able to update styles though, to work on bug fixes or do updates from time to time. Similar to the installable skins, you then would have an install button at the deviation page of those styles directly. This would be less scary for people who are warned that there are monsters outside dA and - which would be another big plus (i am totally not biased here lol) - it would make miscats to that gallery nearly impossible.

JQUERY - LIBRARY - jQuery.copyCSS

jQuery.copyCSS: Quick, simple jQuery extension to retrieve or copy all styles (with optional whitelist and blacklist) from an HTML element.

CSS + STYLUS - Stylus et les préprocesseurs CSS (en guise d’introduction) · Les intégristes

(via)
Première question : qu’est-ce qu’un préprocesseur ? Un préprocesseur est un programme qui procède à des transformations sur un code source, avant l’étape de traduction proprement dite (compilation ou interprétation). source Wikipedia. Dans le cas d’un préprocesseur CSS la syntaxe simplifiée ou enrichie en entrée est analysée et compilée en un langage que nous connaissons tous et que nous utilisons au quotidien : CSS.

September 2017

CSS - DESIG ONLINE TOOL - Responsive web design tool, CMS, and hosting platform | Webflow

(via)
Webflow gives designers and developers the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you.

DEV - Web developer guides | MDN

Web developer guides. These articles provide how-to information to help you make use of specific technologies and APIs.

August 2017

IMAGE TAG - CSS - How to Apply a CSS Class to an Inserted Image | Chron.com

(via)
How to Apply a CSS Class to an Inserted Image3. Add 'class="myimage"' within the img tag; it doesn't need to be in a specific location, such as before "title" or "alt," to function. For instance, if your code is (img src="myhouse.jpg" alt="Photo of my house")," it should become: (img src="myhouse.jpg" alt="Photo of my house" class="myimage")

CSS - VARIABLE - Autoprefixing, with CSS variables! | Lea Verou

a neat trick one can do with CSS variables, precisely due to their dynamic nature. Let’s say you want to use a property that has multiple versions: an unprefixed one and one or more prefixed ones. In this example we are going to use clip-path, which currently needs both an unprefixed version and a -webkit- prefixed one, however the technique works for any property and any number of prefixes or different property names, as long as the value is the same across all variations of the property name. The first part is to define a --clip-path property on every element with a value of initial. This prevents the property from being inherited every time it’s used, and since the * has zero specificity, any declaration that uses --clip-path can override it. Then you define all variations of the property name with var(--clip-path) as their value: * { --clip-path: initial; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); }

June 2017

CSS - @font-face - Using @font-face - CSS-Tricks

The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS. Without the rule, our designs are limited to the fonts that are already loaded on a user's computer, which vary depending on the system being used. Here's a nice breakdown of existing system fonts.

CSS - ICON - SVG / Icon FONT (@font-face) - Inline SVG vs Icon Fonts [CAGEMATCH] | CSS-Tricks

If you're building an icon system for a site, you have some options. If you know the icons need to be raster images, then you'll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Two of those options are using inline SVG and using icon fonts. Let's compare.

CSS - OUTIL - Pleeease (le couteau suisse des postprocesseurs) - Alsacreations

Par contre, bien moins connus sont les postprocesseurs : ceux-là interviennent à partir d'une feuille CSS standard pour la rendre lisible ou compatible universellement. L'exemple de postprocesseur le plus célèbre étant Autoprefixer : donnez-lui des CSS non préfixés et il se débrouille pour ajouter les préfixes nécessaires manquants.

CSS - CODE EXAMPLE - "Progress bar horizontal" qui varie suivant le scroll

In AlsaCreation : CODE EXAMPLE -" Progress bar horizonta"l qui varie suivant le scroll body { -moz-box-direction: normal; -moz-box-orient: vertical; background: #f3f3f3 none repeat scroll 0 0; color: #000; display: flex; flex-direction: column; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size: 1.6rem; min-height: 100vh; }

CSS - Conserver le ratio 16/9 des images fullscreen et vidéos - Alsacreations

Le but est ici de faire en sorte que l'image de fond que l'on aura placée en CSS conserve son ratio de 16/9 et prenne toute la taille du navigateur, quelle que soit la taille de ce dernier (aka fullscreen). Pratique quand on fait du responsive. Voici le code utilisé : .ratio { background: url("monimage.jpg") no-repeat; background-size: cover; width: 100vw; height: 56.25vw; } Concrètement ce que l'on fait : on donne à l'image la largeur du navigateur grâce à l'unite vw (viewport-width) on lui donne la hauteur à laquelle on a appliqué un ratio 16:9 calculé en faisant 100 * 9 / 16 de la largeur du navigateur

CSS - Flexbox Cheatsheet (pense-bête) - Alsacreations

rassemble les informations techniques nécessaires à un usage de Flexbox au quotidien. Ce memento est composé des sections suivantes : propriétés Flexbox applicables sur le parent (avec valeurs par défaut) propriétés applicables sur les enfants support des navigateurs (et version de spécification supportée) liste des bugs navigateurs et contournements les plus courants ordre de priorité des propriétés (voir cette présentation PDF) quelques modèles classiques : objet "media", centrage multiple, grille mono-ligne avec et sans gouttières les propriétés CSS qui ne s'appliquent pas sur les parents et les enfants flexbox liens vers des ressources incontournables