Generowanie css przez js z prefixami

Question

Mam problem ponieważ prefixy to ważna rzecz w moim projekcie, problem w tym że style są generowane dynamicznie przez kod JS, zastanawiam się czy są jakieś inne prostsze wyjścia niż pisanie tego jak na poniższych przykładach, tym normalnym i moim ułatwionym dla większej ilości prefixów.

 

 

Normalnie:

x.css({
 display:`-webkit-box`,
display:`-ms-flexbox`,
display:`flex`
})

// powyższy kod wykonuje się bardzo często (dla flexu to nie ma sensu, ale to przyklad) i jest powielany w wielu miejscach




Moja wersja

function prefixer(x) {

if (x.name === `flex`){
return {
 display:`-webkit-box`,
display:`-ms-flexbox`,
display:`flex`
}
}

x.css(prefixer({name:flex}));

// dla flexu nie pokaże, ale np. dla tranform itd. obiekt procz wlasnosci name przymuje jeszcze wartość, ktora ustawia do kazdego prefiksu

 

Answer 1

W ogóle źle podchodzisz do problemu :) Nie powinno Cię interesować dla jakich konkretnie reguł robisz prefixy, od tego są narzędzia, które po prostu konfigurujesz względem wsparcia konkretnych środowisk.

Podepnij po projekt np. webpacka i dodaj autoprefixera i problem zostanie rozwiązany. Style ustawiasz wtedy normalnie w CSS, JS nie jest od nadawania styli. Webpack zrobi całą resztę za Ciebie i wypluje Ci odpowiednio obrobione pliki css. Dodatkowo zaletą webpacka jest fakt, że bardzo łatwo dodasz sobie pluginy do minifikacji zarówno css jak i js, bo na proda nie powinien lecieć kod bez minifikacji - jest to kompletnie zbędne dla client-side i niepotrzebnie dokładasz bajty w response z serwera.

Comments

Mój projekt posiada sztywne arkusze stylów generowane przez webpacka z sass i prefixami, chodzi mi o te które są w czasie rzeczywistym modyfikowane np. względem ruchów myszki, display:flex to byl zły przyklad, głównie chodzi mi o 

transform: translate3d();

Który zmienia się właśnie na bieżąco i on też wymaga prefixów, w tym wypadku muszę chyba użyć sposobu z JS

---

w tym wypadku muszę chyba użyć sposobu z JS

niekoniecznie... jeśli robisz translate o zawsze konkretnie znaną wartość to możesz po prostu z poziomu JS dodawać i usuwać klasę, która zawiera tę regulę, a webpack obrabiając CSS wypluje Ci w tej klasie prefixy. Ja generalnie jestem dużym przeciwnikiem ingerowania z poziomu JS w style inline, znacznie lepsze moim zdaniem jest operowanie na klasach, co nadal pozostawia jasny podział - CSS wygląd, JS zachowanie.

---

Hmm, a wgl to jesteś pewien, że akurat dla transformacji potrzebujesz prefiksów? Przeglądarki ich potrzebujące niemal wyginęły.

---

fakt, to rozwiązuje chyba problem :)

szkoda tylko tego IE 6... :)

---

Podałem w przykładzie że chodzi o transform, ale nie 2d, tylko 3d, twoj link odnosi się do 2d, w 3d wygląda trochę inaczej

https://caniuse.com/#feat=transforms3d

Zresztą zapewnienie jak największej kompatybilności to podstawa, rozumiem że łączenie js z css nie jest zbyt dobre, ale w przypadku np. generowania położenie elementu proporcjonalnie do polożenie myszy dla samych klas jest cięzkie do zrobienia.

W projekcie - grze, obiekty ruszają się względem ekranu przez transform 3d, więc scroll ustawia im setne wartości itd.

Poza tym, sam react nakłania do używania html i css wewnątrz js, a przecież to jedna z lepszych bibliotek, ale mniejsza, po prostu potrzebuje rozwiązania lepszego niż to co posiadam, bo wydaje mi się.. męczące komputer

---

Wsparcie wygląda de facto tak samo – nie ma przeglądarek, które potrzebują prefiksów. NIe można traktować zachowania kompatybilności jako celu samego w sobie, bo potem dostosowujemy stronę do Netscape'a 3, mimo że w statystykach odwiedzin dla naszej stronie Netscape'a nie było od 20 lat. To że React co poleca nie jest żadnym argumentem, bo liczy się kontekst.

Poza tym nie twierdzę, że style inline są w tym wypadku złe, twierdzę, że prefiksy są Ci niepotrzebne – a to całkowicie co innego.

Dodatkowo co to znaczy "męczące komputer"? Jakie są objawy?

---

Dość dobrze wytłumaczyłeś i dziękuje ci za to, poprzez męczenie komputera mam na myśli zacinanie się przy translacji większych obrazów, ale tu ma znaczenie moje 4gb ramu.