Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Converter: -webkit- to -moz- & -o- (https://javascript.ru/forum/xhtml-html-css/30906-converter-webkit-moz-o.html)

gJam 20.08.2012 09:29

Converter: -webkit- to -moz- & -o-
 
Форумчане, добрый день!
Столкнулся с вопросом о кроссбраузерности, а именно:
Все стили на сайте ориентированны на движок webkit (Chrome/Safari), но потребовалось расширить охват стилей на Firefox (Mozilla Firefox), и по возможности на Opera (Opera Browser).
Имеются ли у кого-нибудь на примете конвертеры стилей с -webkit на -moz- & -o- ?
Интересующие объекты для расширения стилей:
  • border-radius
  • gradient
  • shadow
  • transform
  • animation
Заранее благодарен тем, кто откликнется! Да и другим поможет! ^_^

Deff 20.08.2012 11:25

gJam,
Собственно добавляете для каждого свойтства четыре повтора с расширяющими приставками - пример

-webkit-border-radius:15px;
    -khtml-border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;
    -ms-border-radius:15px;

    box-shadow: 0px 5px 18px #000;
    -webkit-box-shadow:0px 5px 18px #000;
    -khtml-box-shadow:0px 5px 18px #000;
    -moz-box-shadow:0px 5px 18px #000;
    -ms-box-shadow:0px 5px 18px #000;

gJam 20.08.2012 13:00

Deff,
Градиенты имею свои прелести..
Как и анимация с трансформацией..

И изначально вопрос стоял иначе, процесс должен быть автоматизирован, хоть как то..

B~Vladi 20.08.2012 13:34

Префиксы webkit и moz можно и нужно вообще выпилить.

Deff 20.08.2012 13:56

Цитата:

Сообщение от gJam
И изначально вопрос стоял иначе, процесс должен быть автоматизирован, хоть как то..

<script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>




<style class="replac" type="text/css">
#div {
  height:100px;width:100px;
  border-radius : 15px;
  box-shadow: 0px 5px 18px #000;
}
</style>




<style class="replac" type="text/css">
#div2 {
  margin-top:43px;
  height:100px;width:500px;
  border-radius:15px;
  box-shadow: 0px 5px 18px #000;
}
</style>





<div id=div></div><div id=div2></div>



<script type="text/javascript">
var StyleArray='border-radius,box-shadow'.split(","); //Тут добавляем новые свойства для трансформации
var Arr2='-webkit-,-khtml-,-moz-,-ms-'.split(",");
var Out='$1;\n';
for(var j in  Arr2){
  Out+=Arr2[j]+'$1;\n';
}

$('style.replac').each(function() {
  var str=$(this).html();
  for(var i in  StyleArray){
    var pattern = '('+StyleArray[i]+'\\s*?:[^;\\r\\n]*)[;\\r\\n]'
    var rega = new RegExp(pattern,'img');
    str = str.replace(rega,Out)
  }
$(this).html(str);
alert(str)
});


</script>

B~Vladi 20.08.2012 14:00

Deff, проще в IDE find/replace на регулярках заюзать...

Deff 20.08.2012 14:03

B~Vladi,
Дык у мну регулярка - остальное для выпилки и вставки в тег

devote 20.08.2012 14:21

Щас все браузерописатели планируют отказаться вообще от префиксов (ну кроме хрома вроде), и все эти префиксы уже ни к чему

B~Vladi 20.08.2012 15:05

Цитата:

Сообщение от devote
ну кроме хрома вроде

Они вроде уже отказались от них, в последних версиях можно без префиксов писать.

melky 20.08.2012 15:16

Цитата:

Сообщение от B~Vladi (Сообщение 199017)
Они вроде уже отказались от них, в последних версиях можно без префиксов писать.

можно пруф? желательно на mdn.


Часовой пояс GMT +3, время: 08:25.