4 ms·

s/webkit/moz/

billpatrianakos 15y ago
I hope this isn't dumb but what does "s/Webkit/moz" mean? To answer the poster above you, it would work by adding "-moz-propertyname" not removing the "-webkit" stuff. Each browser will ignore the proprietary prefix that doesn't apply to them and then apply the CSS to any style that is prefixed for them or the official implementation. So you can put prefixes for all vendors in your rules and the browser will choose the one that applies while safely ignoring the rest. Just make sure to add the "official" non-prefixed version last so that future browsers or those who implement the spec completely today can render the final version of their implementation of the specific CSS style instead of the half baked proprietary one. I'd add that vendor prefixes are one of the best reasons to use LESS (or SASS or SCSS, I just prefer LESS). Write one mixin (6 lines of code if you line break between each property) and you've just saved yourself countless keystrokes.
- fooandbarify 15y ago
  Not dumb at all! It's a common shorthand around here because in vim (and presumably other text editors) that is the syntax for replacing strings - in this case, replace "webkit" with "moz". It was a useless comment on my part. What I meant (and should have said) is that merely removing the vendor prefix "webkit" wouldn't make it work with Mozilla, but replacing it with "moz" probably would. (I'm not certain about the details of Mozilla's feature parity with Webkit when it comes to CSS animations but I suspect they are almost equal.)
  - risratorn 15y ago
    might be easier to remember for non-vi users when you use the term [s]ubstitute instead of replace, makes more sense ... :D (another uselss comment tho)
  - chrisbroadfoot 15y ago
    It originated from ed
- alexchamberlain 15y ago
  I would love to see this in LESS, but how do you overcome the loops?
  - billpatrianakos 15y ago
    I'm not exactly sure what you mean by "loops". Can you clarify? Maybe it's because I'm not very familiar with SASS or SCSS. If what you mean is how do you go about not having to repeat certain properties I'm thinking of just simple mixins. Something like: .circle-outlines-star (@radius: 15px) { -o-border-radius: @arguments; ...other prefixes, shortened for brevity... } Then you'd just add that in wherever you want some radius like so: .star-container { .circle-outlines-star(optional radius override here); ...and more styles... } Yeah, super simple and just off the top of my head but hopefully I addressed the question about loops. I don't know if you mean loops in code or literally like spinning animated loops. It's like 3am, got insomnia, and I'm effing commenting all night. Shoot me.
    - alexchamberlain 15y ago
      My question was... The code on which this example is based uses SASS loops. Given that LESS hasn't got support for loops, how would you generate the required classes etc? I think you answered that question...

s/webkit/moz/

I hope this isn't dumb but what does "s/Webkit/moz" mean? To answer the poster above you, it would work by adding "-moz-propertyname" not removing the "-webkit" stuff. Each browser will ignore the proprietary prefix that doesn't apply to them and then apply the CSS to any style that is prefixed for them or the official implementation. So you can put prefixes for all vendors in your rules and the browser will choose the one that applies while safely ignoring the rest. Just make sure to add the "official" non-prefixed version last so that future browsers or those who implement the spec completely today can render the final version of their implementation of the specific CSS style instead of the half baked proprietary one. I'd add that vendor prefixes are one of the best reasons to use LESS (or SASS or SCSS, I just prefer LESS). Write one mixin (6 lines of code if you line break between each property) and you've just saved yourself countless keystrokes.

fooandbarify 15y ago
Not dumb at all! It's a common shorthand around here because in vim (and presumably other text editors) that is the syntax for replacing strings - in this case, replace "webkit" with "moz". It was a useless comment on my part. What I meant (and should have said) is that merely removing the vendor prefix "webkit" wouldn't make it work with Mozilla, but replacing it with "moz" probably would. (I'm not certain about the details of Mozilla's feature parity with Webkit when it comes to CSS animations but I suspect they are almost equal.)
- risratorn 15y ago
  might be easier to remember for non-vi users when you use the term [s]ubstitute instead of replace, makes more sense ... :D (another uselss comment tho)
- chrisbroadfoot 15y ago
  It originated from ed
alexchamberlain 15y ago
I would love to see this in LESS, but how do you overcome the loops?
- billpatrianakos 15y ago
  I'm not exactly sure what you mean by "loops". Can you clarify? Maybe it's because I'm not very familiar with SASS or SCSS. If what you mean is how do you go about not having to repeat certain properties I'm thinking of just simple mixins. Something like: .circle-outlines-star (@radius: 15px) { -o-border-radius: @arguments; ...other prefixes, shortened for brevity... } Then you'd just add that in wherever you want some radius like so: .star-container { .circle-outlines-star(optional radius override here); ...and more styles... } Yeah, super simple and just off the top of my head but hopefully I addressed the question about loops. I don't know if you mean loops in code or literally like spinning animated loops. It's like 3am, got insomnia, and I'm effing commenting all night. Shoot me.
  - alexchamberlain 15y ago
    My question was... The code on which this example is based uses SASS loops. Given that LESS hasn't got support for loops, how would you generate the required classes etc? I think you answered that question...