PUBLIC MARKS from decembre with tags css & tutorial

Scrimba is a new way of teaching and learning how to code. We call it interactive code screencasts. Here’s why it's a great way of learning.

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.

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

'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

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.

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

If you were attentive you should see that the line width: calc( 12.5em ) is the trick here. Why? Let’s see all these widths like in pairs – exactly what we need browsers to do. The first pair is width: 80% (content) and width: 16.666% (sidebar) that does the job in calc() incompatible browsers, which will just ignore calc(). It is the callback (backup). It means that the minority of website visitors will see narrower sidebar on narrower viewports. And that should be perfectly fine for people using older browser versions. The second: width: calc( 100% - 15em ) and width: calc( 12.5em ). This is for newer browser versions which will override the previous width definitions

KIS (Keep It Simple) A simple succession of headings and divs should lead users to assume - rightly - that those headings are followed by their respective section (by the content they "introduce"). This alone is enough for screen-reader users to make sense of the markup—after all, when it comes to content, this is the most common markup pattern on the Web.

The recipe for the best user experience: Start with POSH, a simple set of heading/div pairs Add ARIA (role, aria-selected, aria-hidden, aria-labelledby) and tabindex attributes using JavaScript as these would be confusing if there was no behavior attached to the widgets. Use JavaScript to also plug a class on the component according to its type (accordion or tabpanel). Style the widget using the selector inserted by the script, this way containers are not hidden if there is no script support. Use cursor to style the tabs because those behave like buttons (default), not links (pointer). In case the component is displayed as a Tab Panel, style it as an Accordion before its tabs start wrapping (to accomodate user’s font-size) or at narrow widths...... ../..

Let's take a look at what it takes to build a grid overlay with CSS. It will be responsive, easily customizable and make heavy use of CSS variables (known more accurately as "CSS custom properties"). If you aren't familiar with custom properties, I'd highly recommend reading What is the difference between CSS variables and preprocessor variables? and watching Lea Verou's enlighting talk on using them. This grid overlay that we're building will consider a developer tool, as in, a tool just for us, not really our users. So, let's not worry too much about browser support (If you do care, check out caniuse… data on custom properties). While it's impossible to preprocess custom properties to behave exactly the same as native support, if you use them just like you would preprocessor variables, tools like the postCSS plugin cssnext can transform them into CSS compliant with older browsers.

Add any overflow value other than visible to your container: div#nav { overflow:auto; } Then add width to restore the width : div#nav { width: 100%; overflow:auto; }

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.

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

Les problèmes de flottaison en CSS

Bon tuto (In US) pour créer des flèches avec les borders

Tous les cas solvables en pur CSS, et tant qu'à faire montrer comment les résoudre. Accrochez-vous, c'est parti !

Mise en page plus fantaisiste avec flexbox. flex: initial;flex: none;flex: 1; flex: 2;

Helps you understand how the nth-child, nth-last-child, nth-of-type and nth-last-of-type CSS3 selectors work.

/* For image replacement */ .ir { border:0; font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; } Edit du 09/04/2012 — N’hésitez pas à jeter un oeil sur l’article : My thoughts about the latest Image Replacement techniques qui pointe les défauts de ces nouvelles méthodes de remplacement de texte par une image.

What to do with these boxes? The six colored boxes (A, a, B, b, C, c) are "draggable", which means you can use your mouse to position them anywhere in the page. The input elements in the colored fieldsets let you set z-index and position values for each one of these six boxes. These fieldsets are color coded, which means a fieldset's background color matches the background color of the box it is supposed to style. Use Firebug to monitor in real time how these elements get styled.

Responsive or not, there’s no reason why we shouldn’t all be designing and building sites on flexible foundations.

Make the Footer Stick to the Bottom of a Page

L'essentiel de la technique est de retirer la classe hover du body LORS du défilement et tous vos . hover sélecteurs ne correspond pas jusqu'à ce que l'utilisateur cesse de faire défiler la page , la classe étant alors ajoutée a body. About avoiding unnecessary paints through disabling hover effects as the user scrolls, which is a great approach. The down side being managing all your hover states through a parent class.