css 3

spécifique à CSS 3 (normes, thèmes dupal 7...)

De l'importance de !important

Ex mise en forme pour iXe

Description de la conf en place et du soucis de mise en forme

Thème: zen_x (sur zen 5.5), avec modules views_slideshow (7.x-3.1 + views_slideshow_cycle) et adaptive_image 7.x-1.4, type de contenu créé "slide_show" (on n'affiche que body et field_imgslide affichée avec  "Style d'image : slide_show").

clearfix : forcer un bloc à respecter ses enfants

sur clearfix = “float containment” cf http://fuseinteractive.ca/blog/understanding-humble-clearfix

La hauteur du parent n'etant pas visible par les enfants, il est possible que (contenus en flux insuffisant pour remplir) un conteneur d'élément flottant puisse être plus petite que le contenu flotté (marges, frontières... peuvent ne pas se comporter comme nous le voulons).

Sélecteurs avancés Css 3

la base

sélecteur universel (toutes les balises sans exception)  * { }

RWD - % placeholder selectors et @extend

Source: http://thesassway.com/intermediate/understanding-placeholder-selectors

Sass fournit un certain nombre de façons différentes de partager le code entre les règles CSS: mixins (pour insérer de nouvelles propriétés et / ou des règles CSS dans votre CSS) et  @extend pour partager des propriétés CSS entre les sélecteurs.
Sass 3.2 introduit un nouveau concept appelé "espaces réservés" qui optimise la sortie CSS de la directive @extend

  • La directive @extend : par ex .error-icon et .info-icon héritent des propriétés de .icon
  • Les sélecteurs d'espaces réservés, commencent par % et n'apparaissent pas dans le css généré
  • Comparaison de @extend  et mixins (et css généré pour le meme exemple)
  • Les limites de @extend

Sass et compass: syntaxe et ex

Ex de code sass/compass (et css générées)

Ex variables.
Ex nesting selectors pour éviter les répétitions. + Notions de contexte (2 nivo), objets (identifié par class ou id, 4 nivo max, en général on travaille en 2-3) et états d'interaction (avec objects) - et leurs niveaux de profondeur respectifs.
Ex de Mixins, pour utiliser des bouts entier de code. Ex mixin border-radius

Utiliser: compass clean et compass watch

outils online: http://www.responsinator.com/ et sa faq  ; http://compass-style.org/ et http://compass-style.org/help/tutorials/spriting/ ;

Media Queries

Source: http://fr.slideshare.net/ucbdrupal/bdug-responsive-webtheming20120723

CSS3 étend les fonctions des requètes médias (media queries):

  • vérification des fonctions (d'un média particulier) comme largeur, hauteur et couleur (width, height, color)
  • styles sur mesure pour des devices

règle @import : par ex   @import url(style480min.css) screen and (min-width: 480px);

Drupal for firebug

Pour utilisation de la partie "drupal" du plugin de Firefox (ou celui de Chrome), il faut installer ce module sur le site drupal.

Installer avec drush drush @sitet dl drupalforfirebug && drush @sitet en drupalforfirebug

Les 2 perms, Access et Execute Firebug PHP sont à admin/people/permissions#module-drupalforfirebug

Adaptivetheme, coté CSS 3 (avec ou sans sass?)

En PJ: les 2 css globales ie pour toute taille de device (non "responsive"):  global.styles.css (a bp de selecteurs vides donc soit en effacer soit utiliser SASS) et global.base.css (inclus normalize.css ainsi que d'autres classes et styles de base (alignement des containeur par défaut, images flexibles..)).

Fichier attachéTaille
Plain text icon global.styles.css_.txt29.39 Ko
Plain text icon global.base_.css_.txt13.68 Ko
Plain text icon adaptative1info.txt17.6 Ko

coins arrondis (jquery corner)

A tester (comment se passe avec jquery update ?)

Pages

S'abonner à RSS - css 3