теги HTML к инструменту CSS
Я делаю некоторую сеть-dev и часть разработчиков и экспорт из фотошопа. Сгенерированный код является ужасающим. Первая вещь, которую я делаю, вынимает все из тегов и помещает их в файлы CSS. Таким образом, я задавался вопросом, был ли инструмент, который может автоматизировать это?
3 ответа
Я бы написал свой собственный скрипт, вот здесь Вы можете почерпнуть немного вдохновения:
- Если вы знаете perl, зайдите на perlmonks.org/index.pl? node_id=292225
- Если вам нравится пробовать, а потом платить, ищите "aggiorno-extract-merge-inline-style"
- Для jQuery посмотрите этот хороший скрипт nealgrosskopf.com/tech/thread.php?pid=63
Это делает противоположное, но если вам нравится Ruby, возможно, вы сможете изучить код: поищите premailer на github, Он использует гем Hpricot.
Конечно, если вы не хотите тратить время на кодирование, вы можете использовать tidy:
tidy -clean your-crap-inlined-file.html
Если ваш файл your-crap-inlined-file.html содержит: Some TEXT ...
Он заменит его, вставив что-то вроде этого
<style type="text/css">
/*<![CDATA[*/
p.c1 {color:red;}
/*]]>*/
</style>
поверх вашего файла, и в то же время заменит ваш инлайновый код на:
<p class="c1">Some TEXT ...</p>
Это был бы интересный инструмент.
Думаю, мой первый вопрос: будет ли код, созданный Photoshop, быть семантическим? IE. будет ли один в качестве основной темы .. и
для абзацев и т. д.
Тогда, когда дело доходит до css .. вы определенно не будете создавать качественный код делая это. Как бы то ни было, мне кажется, что вы на самом деле не человек Front End. Это усложняет любой ответ ..
Лучший ответ: кодируйте его вручную .. код будет лучше. Следующий ответ: ручное кодирование исключено? есть еще несколько вариантов.
- Есть компании, которые берут ваши psd и преобразуют их в семантический css / html за 24 часа. Я сомневаюсь, что код замечательный, но уверен, что он лучше, чем то, что вы делаете с Photoshop.
- Делать это самому, как будто вы сами этого не хотите. : D
Хорошее руководство здесь .. однако оно в основном помогает вам писать код.
HTML Tidy - отличный инструмент. Он не будет делать именно то, что вы хотите, но это может быть хорошим началом, если вы используете сгенерированный html. Вот онлайн-экземпляр: http://infohound.net/tidy/