PUBLIC MARKS from decembre with tag css

Un préprocesseur CSS est un outil (ou programme) permettant de générer dynamiquement des fichiers CSS. L’objectif est d’améliorer l’écriture de ces fichiers, en apportant plus de flexibilité au développeur web (source : Wikipedia). Les préprocesseurs CSS les plus couramment employés sont aujourd’hui Sass, LESS (dont nous avons déjà parlé), PostCSS et Stylus.

L'une des possibilités offertes est alors de basculer tous les traitements et calculs de cet élément du côté de la carte graphique (GPU), et non plus du processeur (CPU). Bref, on active l'accélération matérielle. Une transformation CSS "classique" (translate, rotate, skew, scale, matrix) ne suffit pas à activer l'accélération matérielle, il est nécessaire que cette transformation passe via l'axe de la profondeur (axe Z). En clair, il faut opérer une transformation 3D. Voici une liste de déclarations CSS 3D permettant d'activer l'accélération matérielle sans altérer l'affichage ou la position de l'élément : transform: translateZ(0); transform: translate3d(0,0,0); perspective: 1000; backface-visibility: hidden;

La propriété will-change permet aux auteurs de fournir une indication au navigateur sur la propension d'un élément à changer (afin que le navigateur puisse mettre en place les optimisations nécessaires avant que l'élément change vraiment). Ce type d'optimisation permet d'augmenter la réactivité de la page en effectuant des calculs (éventuellement coûteux) en prévision du changement. Il est parfois difficile de bien utiliser cette propriété

Is it possible to set the equivalent of a src attribute of an img tag in CSS?

Use the form below to calculate the missing value for a particular aspect ratio. This is useful, for example, when resizing photos or video. Formula Say you have a photo that is 1600 x 1200 pixels, but your blog only has space for a photo 400 pixels wide. To find the new height of your photo—while preserving the aspect ratio—you would need to do the following calculation: (original height / original width) x new width = new height___ (1200 / 1600) x 400 = 300__By example 742 : 349 ___

maintaining the assigned aspect ratio as it resizes. .sixteen-nine { position: relative; } .sixteen-nine:before { display: block; content: ""; width: 100%; padding-top: 56.25%; } .sixteen-nine > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

Des sortes de “super éléments” ?__Les éléments générant un contexte de formatage block deviennent des sortes de “super éléments” ayant un certain nombre de super responsabilités : ils deviennent entre-autre garants de l’affichage de leurs enfants (qu’ils soient blocks ou inline). Ces super éléments acquièrent également des super pouvoirs très pratiques, et c'est là que ça devient intéressant : __Ils contiennent des flottants __Ils ne s’écoulent pas autour des flottants __Ils ne subissent pas la fusion de marges __Et plein d’autres petites fioritures

I found that we can truncate text using two carefully placed CSS pseudo elements. ___Benefits _1. Pure CSS _2. Responsive _3. No need to recalculate on resize or font’s load event _4. Cross browser

Centering a div of unknown height and width Horizontally and vertically. Works with reasonably modern browsers (FF, Safari/Webkit, Chrome, IE10, Opera, etc.) ____ .content { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

box-decoration-break: clone;

No. Once a script is loaded, the objects and functions it defines are kept in memory. Removing a script element does not remove the objects it defines. This is in contrast to CSS files, where removing the element does remove the styles it defines. That's because the new styles can easily be reflowed. Can you imagine how hard it would be to work out what a script tag created and how to remove it? EDIT: However, if you have a file that defines myFunction, then you add another script that redefines myFunction to something else, the new value will be kept. You can remove the old script tag if you want to keep the DOM clean, but that's all removing it does. EDIT2: The only real way to "clean up" functions that I can think of is to have a JS file that basically calls delete window.myFunction for every possible object and function your other script files may define. For obvious reasons, this is a really bad idea.

Thanks to some awesome answers in other threads, I learned how to: load jQuery and jQuery-UI in a bookmarklet load a CSS into a bookmarklet using jQuery create a DIV in a bookmarklet using jQuery create jQuery UI dialog (external link) and I could manage to combine all four things into a single script which works both as a BookMarklet and as a GreaseMonkey script, which is absolutely awesome.

These are my legal CSS Hacks for fixing web browser quirks or outright bugs. Please enjoy, I have been working on them for years. May it help you if you need them. Please read here first: [What are these CSS Hacks Anyway?] Then check my [Live CSS Hacks Test Page] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

The newly-introduced CSS “snap points” properties could make it a whole lot easier to create CSS-only scroll effects (once browser support catches up). This post from Sergey Gospodarets' blog includes demos of snappy scrolling for image galleries and full-page vertical scrolling.

The addon directory in the distribution contains a number of reusable components that implement extra editor functionality

Aller un peu plus loin Oui mais voila, il reste encore trop de fichiers à charger. C'est là qu'intervient le schéma Data-URI, que l'on utilisait pour les icônes images afin de supprimer une requête en intégrant directement l'image dans le fichier CSS. L'idée est la même, intégrer directement la police de caractères dans le fichier CSS. Une option disponible dans les préférences d'Icomoon : "Encode et Embed Font in CSS". On se retrouve avec un fichier CSS contenant les définitions suivantes, où les versions TTF et WOFF de la police sont directement dans le fichier CSS, la version EOT restant externe.

iHover is an impressive hover effects collection, powered by pure CSS3, no dependency, work well with Bootstrap 3!

Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations.

a free and open project called Iconmelon which aims to collect free SVG icon sets and provide a filter and CSS boilerplate.

Welcome to placehold.it A quick and simple image placeholder service. How does it work? Just put your image size after our URL and you'll get a placeholder.

Le sélecteur jQuery est la plupart du temps utilisé pour sélectionner des éléments existant dans le DOM, via une règle CSS. Mais le sélecteur peut aussi créer de nouveaux éléments HTML de manière extrêmement simple ! Voici un petit exemple très simple qui créé un élément div , écrit "Salut !" à l'intérieur, puis enfin ajoute cet élément à la fin de la page web (en l'ajoutant à la fin body) :