Css lint

bonsoir

css lint m'affiche 3 warning
1: Use the bulletproof @font-face syntax @font-face declaration doesn't follow the fontspring bulletproof syntax.
src: url("../fonts/notosanstifinagh.woff2")

quelle serait la bonne syntaxe?

-------

2:Disallow selectors that look like regexs Attribute selectors with ^= are slow!
span[class^=w]:nth-of-type(n+0) {

j'ai teste
span[class*="w"]:nth-of-type(n+0) {
css lint me dit la meme chose
y aurait il une autre facon de selectionner mes span qui donnerait un meilleur resultat?

--------

3:Beware of broken box size Using width with padding-left can sometimes make elements larger than you expect.
padding-left: 15%

ca je ne vois pas comment faire autrement et ca me semble moins important

en vous remerciant pour votre aide

------------
voici une portion de mon code

@font-face {
    font-family: tifinagh;
    src: url("../fonts/notosanstifinagh.woff2")
}

.rond> div {
    position: relative;
    margin: 0 auto 0;
    width: 300px;
    height: 240px;
}

span[class^=w]:nth-of-type(n+0) {
    transform-origin: 50% 100%;
    font-family: tifinagh;
    position: absolute;
    height: .5em;
    line-height: .028em;
    white-space: pre;
    overflow: visible
}

.w0 {
    transform: rotate(2.99rad);
    left: 158px;
    top: 194px
}

.w1 {
    transform: rotate(3.07rad);
    left: 150.5px;
    top: 199.8px
}
.w2{ etc

Modifié par nantais (04 Apr 2019 - 20:59)

Salut

Solution au problème 1 :

@font-face {
    font-family: tifinagh;
    src: url("../fonts/notosanstifinagh.woff2") format('woff2');
}

Problème 2 : CSS Lint me semble bien strict, je ne vois pas la solution.

Bonjour,

j'utilise stylelint donc sur l'outil je pourrai pas trop t'aider…

span[class^=w]:nth-of-type(n+0)

Ici ton :nth-of-type(n+0) n'apporte rien à part de la spécificité ou bien tu as changé les valeurs de an+b avant de poster ici ?

nantais a écrit :
y aurait il une autre facon de selectionner mes span qui donnerait un meilleur resultat?

Avec une classe mais si tu ne peux pas l'ajouter côté serveur, bah va pour le sélecteur d'attribut avec expression régulière : "lent" c'est très relatif. Plus lent qu'un id ou une classe oui mais c'est un pouième de ms… Si CSS Lint permet de désactiver localement une règle via un commentaire comme le permet stylelint, tu peux (t')autoriser cet écart à la règle localement et passer à autre chose

nantais a écrit :
3:Beware of broken box size Using width with padding-left can sometimes make elements larger than you expect.

Dans quel modèle de boîte travailles-tu ? Le warning est pertinent si tu utilises le modèle de boîte standard.
Sinon avec l'autre modèle de boîte, c'est une erreur de CSS Lint de t'avertir de ça. Ma solution c'est d'utiliser border-box (le truc sur lequel je crachais copieusement du temps d'IE6 et des float mais avec l'arrivée du RWD, hum finalement non c'est très bien surtout avec l'astuce du * { box-sizing: inherit } compatible avec des frameworks comme Kendo UI qui boss(ai)ent dans leurs composants avec le box-sizing standard)
Modifié par Felipe (05 Apr 2019 - 12:02)