Archives de
Catégorie : HTML CSS

HTML5 form controls

HTML5 form controls

From HTML5 the control of forms is possible directly in the html input thanks to the pattern attribute and its value in the form of a regex. A regex is a regular expression, in other words a very powerful text control filter verifying the validity of information. Before HTML5, control of forms had to be done in JavaScript and its use was less convenient. The pattern attribute is compatible on browsers: Firefox 4+ Chrome 5+ Opera 9.6+ Internet explorer 10+…

Lire la suite Lire la suite

Ten tips for organizing your css code

Ten tips for organizing your css code

1. Insert the CSS reset One of the biggest challenges when developing a website is cross-browser compatibility. The CSS reset is a style sheet that greatly reduces these incompatibility errors by providing a general style that is defined but easily customisable. Normalize.css is a modern and quite precise reset based on HTML 5. https://necolas.github.io/normalize.css/ You should insert the style sheet for this CSS reset in the <head> section, before your style definitions. 2. Organise the elements To be able to…

Lire la suite Lire la suite

Selectors in CSS

Selectors in CSS

What are CSS selectors? A CSS selector is used as a way to target elements in our DOM (Document Object Model) and apply a certain style to it. Basically, what we are doing is defining the style we want to use and then applying a « filter » that target specified items. In order to do that, we are going to use this structure: There are many selectors in CSS, we’ll talk about them later on. The style we apply can target…

Lire la suite Lire la suite

The initial of Cascading CSS ( @layer CSS )

The initial of Cascading CSS ( @layer CSS )

Introduction Cascade Layers One of the fundamental design principles of CSS is cascading, which allows several style sheets to influence the presentation of a document. When different declarations try to set a value for the same element/property combination, the conflicts must somehow be resolved. That the main reason why we have to carefully think about how we organize the CSS code. Currently, CSS layering has to be achieved with careful management of selector-specificity, or over-use of !important flags – both…

Lire la suite Lire la suite

Les Conventions CSS/HTML

Les Conventions CSS/HTML

Généralités La feuille de style CSS est de préférence UNIQUE et appelée à l’aide d’un élément <link> dans la section <head>. Il est important dans un projet que les développeurs adoptent un style d’écriture identique, cela favorise la relecture du code pour tout le monde et facilite grandement le débogage. Il faut organiser le code de façon logique.Commencer par les éléments du <body>, puis ceux du <header>, de la <nav> et du <footer>. Pour une meilleure organisation, il est recommandé…

Lire la suite Lire la suite

CSS Grid

CSS Grid

What’s CSS Grid? The CSS Grid Layout is a two-dimensional grid-based layout system based on both columns and rows. Thanks to this feature, Grid is the most powerful layout system currently available in CSS, even more than the CSS Flexbox layout which a one-dimensional system. How to use it? Grid / Inline To get started, you have to create an html file where you define all your containers. I’ll let you do it without any clues because I know you…

Lire la suite Lire la suite

Sass (ou le css compilé)

Sass (ou le css compilé)

Lors de gros projets web, nous avons beaucoup de fichiers css. Le SASS est une alternative, un moyen pour « simplifier » notre css, pour n’avoir a coder qu’une seule fois. Techniquement, a quoi ça sert ? le sass est un langage de programmation basé sur le css. Avec sass, vous pouvez créer autant de feuilles de style que vous le voudrez. Toutes ces pages seront ensuite compilée par la suite pour générer un seul et unique fichier CSS (gain de temps)….

Lire la suite Lire la suite

PUG HTML

PUG HTML

Introduction to Pug Pug is a template engine implemented in JavaScript that allows you to dynamically generate HTML, like Thymeleaf in Java and Twig in PHP. Its syntax is inspired by Haml. It is therefore minimalist and based on indentations. I have never used pug but my first impressions are rather mixed. Previously « Jade » Before, Pug was called Jade. Only Jade has become a registered trademark and as the domain of the trademark is very close (both refer to the…

Lire la suite Lire la suite

La propriété position en CSS (Cascading Style Sheets)

La propriété position en CSS (Cascading Style Sheets)

La propriété position en CSS permet de positionner les éléments différemment du cours normal du document. Il existe 5 principaux types de positionnement différents :1/ Static2/ Relative3/ Absolute4/ Fixed5/ Sticky 1/ StaticIl s’agit de la valeur par défaut. L’élément suivra le cours normal du document. Ici le second carré est positionné en « static ». 2/ RelativeIl s’agit d’un positionnement assez proche du « static« . L’élément est positionné tout d’abord dans le cours normal du document. Par la suite, il est possible de…

Lire la suite Lire la suite

The <canvas> element

The <canvas> element

<canvas> is an HTML5 element that allows the creation and manipulation of graphical elements (paths, shapes, text, bitmap images) via a scripting language, most often JavaScript. All modern browsers support it natively, and can render it using hardware acceleration. To start, we add the following tag to the page, specifying the width and height attributes: Drawing lines Let’s draw a primitive C using two lines: Drawing a shape Now, let’s add a D using the context method arc. It accepts the following arguments: Drawing text Next up, we’ll write an A using…

Lire la suite Lire la suite