Bonjour, alors voila mon soucie j'utilise un reset sur mon css

* {
    all: unset;
}
base, basefont, datalist, head, meta, script, style, title,
noembed, param, template {
    display: none;
}

Malheureusement cet imb**** me casse mon Recaptcha (que sous les navigateurs base chrome)

y a t'il un moyen quelconque d'exclure .g-recaptcha de cet règle ?

merci d'avance

-
Edité par apokal 12 août 2017 à 21:39:18

Bonjour,

Utiliser * est assez hasardeux, surtout pour faire un reset si… violent. Si les éléments ont un style de base, c'est pas pour rien, il y a une logique là-dedans. Je te conseille donc de jeter ce reset-là et de faire ton style à toi tranquillou.

Merci a toi, tampis je suis reparti sur un bon vieux reset je le met a tous hazard.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
input.middle:focus {
    outline-width: 0;
}
input:focus, select:focus, textarea:focus,button:focus {
outline: none;
}

Mais… non.

Les resets, faut pas. Faut plus. C'était (plus ou moins) pertinent à une époque, mais maintenant les navigateurs suivent les mêmes standards et on n'a vraiment, vraiment, plus besoin de tirer au bazooka sur les éléments pour les mettre au pas.

Je vais te lister ce qui pose problème ici :

• html, div, span, applet, object, iframe, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, li, fieldset, legend, article, aside, canvas, details, embed, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video : ces éléments n'ont pas de margin de base, inutile de leur enlever (oui, j'en ai enlevé quelques uns, ceux qui ont des marges par défaut - yen a pas beaucoup)
• les mêmes n'ont pas de padding non plus
• dans la liste de base, il n'y a que fieldset qui ait un border : pas besoin de l'enlever sur les autres
• font-size est héritable : ça se définit sur html ou body, pour la base, puis on redéfinit sur les éléments qui en ont besoin, et basta.
• font contenant font-size, il l'écrase, donc font-size, avant même d'avoir pu faire quoi que soit, est inutile
• vertical-align est à baseline par défaut sur tous les éléments, pas besoin de renfoncer le clou
• passons sur le fait que cette liste contienne des éléments obsolètes (center = grrrr, et puis strike, big, hgroup)
• ajouter display: block sur les éléments apportés par HTML5, why not, mais bon… tu comptes supporter IE7 ? si non, tu n'as pas besoin de le préciser
• un line-height : 1, c'est vraiment pas beaucoup, c'est très serré, je te conseille de partir sur du 1.2 voire 1.5.
• enlever le style sur ol et ul de base, c'est un peu violent : tu auras sûrement besoin de listes dans ton site. Enlève ça au cas par cas.
• blockquote : pourquoi enlever ce qui n'existe pas encore ? La propriété quote doit être ajoutée, elle n'est pas là de base - et pourquoi deux fois la propriété content ?
• table : c'est OK
• enlever l'outline au focus, pourquoi pas, mais pense bien à le remplacer par quelque chose qui permette bien d'indiquer aux gens qui naviguent au clavier (et sur les formulaires, crois-moi, c'est fréquent) qu'iels sautent d'input en input

-
Edité par Lamecarlate 13 août 2017 à 8:29:26

En effet ce reset je l'utilise depuis plusieurs années il n'est pas très à jours ensuite j'utilise des reset car je préfère tout redéfinir au poil sur chaque class / id c'est aussi pour ça que le all:unset me plaisait beaucoup si il n'y avez pas eu cet histoire de reCaptcha.

Après oui c'est un peux réinventé la roue mais pour le coups je veux connaitre et maîtrisé chaque ligne de css sans avoir de surprise par la suite.

Je prend note pour le reset et je fait les modif au plus vite.

Merci pour ton temps et tes connaissances. 

ps : pour ce qui des browser je ne me cantonne pas au browser "populaire" je ratisse assez large.

-
Edité par apokal 13 août 2017 à 23:50:47

> car je préfère tout redéfinir au poil sur chaque class / id

> je veux connaitre et maîtrisé chaque ligne de css sans avoir de surprise par la suite.

Ben je comprends l'idée, mais le reset n'est pas la solution pour ces deux points : que tu aies mis un reset ou non tu redéfinis par-dessus les feuilles de styles des navigateurs. Au fond ça revient au même, non ?

> pour ce qui des browser je ne me cantonne pas au browser "populaire" je ratisse assez large.

Très bonne idée Et sur quel(s) navigateurs tu vois des différences tellement significatives qu'avant d'avoir mis ton style à toi tu aies besoin de remettre à plat ?

SeaMonkey, Rekonq 1.1 pas mal de version de chrome, opera, firefox et un peux Epiphany

Bon je cherche la petite bête mais ce qui m'ennuis le plus c'est des différence entre certaine version de chrome ou de firefox.

Après une remise a plat généralement je sais que le rendu sera quasi identique sur chaque web browser.

A l'heure actuel en chrome et firefox sous certaine version inférieur j'ai des float qui me casse mon design mais je suis dessus :-)

-
Edité par apokal 14 août 2017 à 19:51:01

le problème le plus récurent c'est ça :

Le dépassement à droite qui marche impec sur toutes les dernière version par contre des que l'on recule un peux pouf.

ps : a gauche normal a droite le pas normal du tout.

-
Edité par apokal 14 août 2017 à 22:52:47

MOI PAR CONTRE J'ARRIVE PAS A UN INSERER UN CLASS DANS LE FICHIER CSS. QUAND JE TESTE IL N'EST PAS PRIS EN COMPTE. AIDEZ  MOI JE SUIS VRAIMENT A L'ETAPE ZERO

Bonjour benediction,

1) on dit bonjour

2) on ne s'incruste dans un sujet (résolu) qui n'a rien à voir

3) ON NE CRIE PAS, merci

4) crée un nouveau sujet dédié à ton problème

Normalement ce genre de message est supprimé sans sommation (pour squattage de topic, et manque de politesse), là c'est ton premier, je suis gentille. Merci de ne pas en abuser.

   .content_l{

      text-align: justify;
      padding: 5px;
      display: block;
      background: url(../img/3.png);
      width: 320px;
      border-left: 1px solid #0b0b0b;
      border-right: 1px solid #0b0b0b;
      font-family: 'artifikamedium';
      color: grey;
      font-size:0.9em;
      line-height: 1.3em;
    }
      
.cal_title{
        display: block;
        border: 1px solid #0b0b0b;
        padding: 2px;
        padding-left: 5px;
        background: url(../img/3.png);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        width: 100%;
        -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
      }
        a.info{
          position:relative;
          text-decoration:none;
          float: right;
          border: 1px solid #0b0b0b;
          text-align: center;
          height: 13px;
          padding-left: 1px;
          line-height: 10px;
          -webkit-border-radius: 4px;
          -moz-border-radius: 4px;
          border-radius: 4px;
          color: #be5f24;
          font-weight:bold;
        }
        a.info span{display: none;}
        a.info:hover span{
          display:block;
          position:absolute;
          top:-60px;
          width:15em;
          border: 1px solid #0b0b0b;
          background: url(../img/3.png);
          text-align: left;
          padding:10px;
          line-height: 18px;
          z-index: 9999999;
          margin-left: 10px;
          color: grey;
          font-weight: normal;

        }
        a.info:hover span:after{
          content:'';
          position:absolute;
          bottom:-11px;
          width:10px;
          height:10px;
          left:50%;
          margin-left:-5px;
        }
      .cal_event{
        display: block;
        margin-top: 3px;
        margin-bottom: 3px;
        padding-left: 20px;
      }
      .cal_date{
        display: block;
        margin-top: 3px;
        margin-bottom: 3px;
        padding-left: 20px;
        font-size: 12px;
      }

	<div class="content_l">
		<ul>
			<li class="cal_title"><?php echo $donnees['cal_cat']; ?>
				<?php if($donnees['cal_desc'] != '0'): ?>
				<a href="" class="info">+
					<span>
						<?php echo $donnees['cal_desc']; ?>
					</span>
				</a>
			<?php endif; ?>
			</li>
			<li class="cal_event"><?php echo $donnees['cal_type']; ?></li>
			<li class="cal_date"><?php echo FrDate($donnees['cal_date']); ?></li>
		</ul>
	</div>

-
Edité par apokal 15 août 2017 à 16:43:28