CSS hack exclusiv pentru Chrome v45

Limbaje de Programare HTML & CSS
, ,
1

Salutare,
Am oarece probleme cu v45 de Chrome despre care am citit cate ceva legat de incompatibilitatea cu Wordpress. Cel mai probabil un bug, amesteca literele din logotext dupa cum urmeaza:

Chrome Version 44.0.2403.155 (64-bit) - totul la locul lui

Version 45.0.2454.85 m (64-bit) - salata orientala

Am primit o solutie care aliniaza literele la loc in v45, margin-left: -10px; dar evident ca se reflecta si in versiuni mai vechi, alterand rezultatul.

Am incercat sa aplic
.chromexx – Chrome xx (change xx with number of specific version) dar fara succes.

/* ar trebui sa functioneze in orice versiune 
de Chrome (v45 cu margin left aplicat) dar fara rezultatul dorit */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .logotext-n {
    color: #f1ecd6;    
    font-family: 'timesbi';
    font-weight: normal;
    font-size: 180px;
    text-transform: lowercase;
    letter-spacing: -15.5px;
    .chrome45.margin-left: -10px; /* update for Chrome 45 issue */
     } 
}

apoi,

/* ar trebui sa mearga exclusiv in v45 dar rezultatul este alterat */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
  .chrome45.logotext-n {
  color: #f1ecd6;
  font-family: 'timesbi';
  font-weight: normal;
  font-size: 180px;
  text-transform: lowercase;
  letter-spacing: -15.5px;
  margin-left: -10px; /* update for Chrome 45 issue */
      } 
}

/* varianta de cod scrisa pentru Chrome la modul general, 
evident nu functioneaza cum trebuie in v45 */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
  logotext-n {
  color: #f1ecd6;
  font-family: 'timesbi';
  font-weight: normal;
  font-size: 180px;
  text-transform: lowercase;
  letter-spacing: -15.5px;
      } 
}

In conditiile astea, cunoasteti un css hack valabl exclusiv pentru v45 de Chrome?
Live link aici. multam.

2

5 posts were split to a new topic: Scrierea cu diacritice și evitarea rombglezei

5

Trebuie sa faci si logo-ul responsive sau fluid.
M-am uitat pe CSS-ul de pe el si small-7 medium-4 columns logo nu are spatiu suficient de manevra in interior (pune medium-5 in loc de medium-4 de test). Asta tine de tine, adica daca tot ai mai multe span-uri in interior inseamna ca ti-ai asumat jongleria asta cu logo-ul.

Observ ca fiecare litera cu CSS-ul logotext-* are font-size diferit si letter-spacing diferit, deci este asumata treaba. Eu as face un singur CSS logotext-letter si as pune font-size:200% sau ceva de genul asta, si containerul logo-ului l-as face tot fluid. As renunta complet la px.

Fa-l responsive si fluid.

Am oarece probleme cu v45 de Chrome despre care am citit cate ceva legat de incompatibilitatea cu Wordpress.

Poate probleme cu teme custom …

6

Salutare, multam pentru interventie,
Ideea este ca nu ma intereseaza partea de responsive.
Adevarat, am probleme serioase pe coding, incerc sa pun cap la cap informatii si uneori nu iese ce trebuie.
In cazul de fata insa, tind sa cred ca am de furca cu un bug de Chrome pentru ca in actualizarile anterioare versiunii 45 nu aveam probleme. Prin urmare, iata si motivul pentru care caut o solutie ca sa nu zic workaround sa mutam topicul la Scrierea cu diacritice și evitarea rombglezei :smile:

Logotextul este spart pe bucati pentru a putea obtine rezultatul dorit dpdv grafic. Astfel ca prima litera apartine unui font iar restul altuia in ideea asta apare si diferenta de marime font-size definita diferit (nu pot aplica 200% pe toata povestea) .Apoi am kerning obtinut prin letter-spacing negativ in fine, n-am efectiv ce sa schimb la format.

Ma interesa o solutie care sa fie aplicabila exclusiv in cazul Chrome v45 (un css hack sau ceva functional) prin care sa apelez margin-left: -10px; ce pare sa inlature defectul manifestat in versiunea de browser amintita.

7

Si de ce nu folosesti o imagine, pentru logo? N-ar fi asta mult mai usor? The power of a logo is strong when used right!

8

Deocamdata este ceva experimental ramane de vazut care va fi forma finala.

Ca sa-ti raspund la intrebare, in general cand vine vorba de text folosit in mediul online, pretentios din fire fiind, evit sa fac uz de “imprimeu” fie el svg sau png (jpeg iese din discutie). In plus, web typografia, cu toate artificiile ei pe partea asta de css, vine in sprijin si are ca scop obtinerea unor rezultate foarte bune proiectate direct din codul sursa in browser, oferind flexibilitate si calitate in acelasi timp.

Unii ar spune ca flexibilitatea vine din Illustrator sau Pshop dar personal gasesc mai eficienta calea asta.

1 Like
9

Aceasta este si opinia mea. Prefer sa folosesc fiecare toolfor it’s [strike]intended[/strike] recommended purpose. Deasemenea, poti inceerca sa vezi user-agent-ul respectivei versiuni de chrome si cu un simplu cod PHP sa modifici style-ul textului la opacitate 0 si elementul in care sunt plasate (elementul anchor, probabil) sa obtina ca background respectivul logo (the way I do it) .svg (for fluidity, responsiveness and sheet).

10

tot in registrul asta off-topic,
Am parcurs si eu materiale (cum avem si aici) in care sunt prezentate diverse tehnici de joaca cu svg-urile. Sunt binevenite fara dar si poate insa, le gasesc utile cand lucram cu forme nu si text. Nu mai amintesc de faptul ca numai lucruri frumoase poti face cu anumite plugin-uri la cateva click-uri distanta, direct pe codul textului (nu este cazul meu aici, dar aminteai de fluidity, responsiveness and sheet).

In fine, parerile sunt impartite cred ca tine de fiecare ce unealta alege :slight_smile: Probabil ca in viitor vor aparea alternative mai usor de folosit; pana atunci, unii scriu carti intregi despre web typografie aplicata din cod :slight_smile:

LE: on topic de data asta, a fost clar un bug de Chrome, in ultima versiune 45.0.2454.93 m (64-bit), lucrurile au revenit la normal in sensul ca logotextul se vede ca in 44.0.2403.155 (64-bit) (OK)

multam tuturor pentru interventie si interes.

1 Like