Как скопировать css с другого сайта

Как воровать элементы дизайна с других сайтов?

Можно ли зайдя на чужой сайт узнать html код, того или иного элемента ?

текст при наведении

Если это статичный код, то конечно можно. Для этого можно просто выкачать всю страничку и выдернуть оттуда все, что необходимо. Ну или использовать возможности браузера. Расскажу на примере Chrome.

  • Клацаем правой клавишей на необходимом элементе и в выпадающем меню нажимаем на "просмотр кода элемента".

текст при наведении

  • Снизу браузера появится html-код страницы. Там выбираем участок кода и нажимаем "Copy as HTML.

текст при наведении

Теперь в буфере обмена у Вас хранится код необходимого элемента. При желании можно более углубленно исследовать каждый элемент и выбирать его отдельные части. Перебирая строки в коде, на экране подсвечивается то, что вы выделили. Не буду углубляться, думаю Вы и сами сможете разобраться.

Но добавлю, таким образом вы выдергиваете только html-код, а элементы дизайна содержат еще стили, которые находятся в .css файлах. Посмотрите какие стили использованы и достаньте необходимые из подключенных .css-файлов.

Как скопировать стиль CSS с веб-сайта для повторного использования

Я расстроен. У меня есть один веб-сайт, на котором работает раскрывающееся меню CSS, а на другом — нет.

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

Есть ли у них какой-либо инструмент, который позволит мне (например, FireDebug) щелкнуть раздел страницы (меню), а затем скопировать правила, которые влияют на этот раздел, игнорируя те, которые скрыты другими правилами, чтобы я мог опубликовать их на втором сайте таблица стилей.

Похоже, что вместо того, чтобы иметь несколько стилей, влияющих на меню и пытаться отсортировать, какие из них имеют приоритет, я хотел бы, чтобы какое-то программное обеспечение разобрало это и сгенерировало единое комбинированное правило . если вы понимаете, что я имею в виду.

2 ответа

И FireBug, и встроенные инструменты разработчика Chrome показывают, какие стили используются выбранным элементом. Я не очень много работаю с FireBug, но знаю, что инструменты разработчика Chrome вычеркнут переопределенные стили и даже покажут пользовательские таблицы стилей по умолчанию, где это применимо. Также неплохо, когда применяются встроенные стили, например, для таблицы атрибут "frame", поскольку он преобразует их в CSS и отображает как часть стиля;)

Похоже, у вас проблемы со случайным наследованием. Постарайтесь убедиться, что ваши селекторы CSS ссылаются только на элементы, которые вы хотите стилизовать. В противном случае все будет запутано и случится подобное.

Инструменты для выборочной копирования HTML + CSS + JS с существующих сайтов

Как и большинство веб-разработчиков, мне иногда нравится смотреть на источник веб-сайтов, чтобы увидеть, как их разметка построена. Инструменты, такие как Firebug и инструменты для разработчиков Chrome, позволяют легко проверять код, но если я хочу скопировать изолированный раздел и поиграть с ним локально, было бы больно копировать все отдельные элементы и связанные с ними css. И, вероятно, столько же работы, чтобы сохранить весь источник и вырезать несвязанный код.

Было бы здорово, если бы я мог щелкнуть правой кнопкой мыши node в Firebug и иметь "Сохранить HTML + CSS для этой опции node". Существует ли такой инструмент? Можно ли расширить Firebug или инструменты разработчика Chrome, чтобы добавить эту функцию?

SnappySnippet

Наконец-то я нашел некоторое время для создания этого инструмента. Вы можете установить SnappySnippet из Интернет-магазина Chrome. Это позволяет легко извлекать HTML + CSS из указанного (последнего проверенного) DOM node. Кроме того, вы можете отправить свой код прямо в CodePen или JSFiddle. Наслаждайтесь!

SnappySnippet Chrome extension

Другие функции

  • очищает HTML (удаление ненужных атрибутов, исправление отступов)
  • оптимизирует CSS, чтобы сделать его доступным для чтения.
  • полностью настраивается (все фильтры могут быть отключены)
  • работает с ::before и ::after псевдоэлементами
  • хороший пользовательский интерфейс благодаря Bootstrap и Flat-UI projects

SnappySnippet является открытым исходным кодом, и вы можете найти код на GitHub.

Реализация

Поскольку я многому научился, делая это, я решил поделиться некоторыми из проблем, которые я испытал, и моими решениями для них, может быть, кто-то найдет это интересным.

Первая попытка — getMatchedCSSRules()

Сначала я попытался получить исходные правила CSS (поступающие из файлов CSS на веб-сайте). Совершенно удивительно, что это очень просто благодаря window.getMatchedCSSRules() , однако, это не сработало. Проблема заключалась в том, что мы принимали только часть селекторов HTML и CSS, которые были сопоставлены в контексте всего документа, которые больше не сопоставлялись в контексте фрагмента HTML. Поскольку синтаксический анализ и изменение селекторов не выглядели как хорошая идея, я отказался от этой попытки.

Вторая попытка — getComputedStyle()

Затем я начал с того, что предложил @CollectiveCognition — getComputedStyle() . Тем не менее, я действительно хотел отделить HTML-форму HTML вместо того, чтобы вставлять все стили.

Проблема 1 — выделение CSS из HTML

Решение здесь было не очень красивым, но довольно простым. Я назначил идентификаторы для всех узлов в выбранном поддереве и использовал этот идентификатор для создания соответствующих правил CSS.

Проблема 2 — удаление свойств со значениями по умолчанию

Присвоение идентификаторов узлам было хорошо отработано, однако я узнал, что каждый из моих правил CSS имеет

300 свойств, что делает весь CSS нечитаемым.
Оказывается, что getComputedStyle() возвращает все возможные свойства и значения CSS, рассчитанные для данного элемента. Некоторые из них были пустыми, некоторые имели значения по умолчанию для браузера. Чтобы удалить значения по умолчанию, мне пришлось сначала получить их из браузера (и каждый тег имеет разные значения по умолчанию). Решением было сравнение стилей элемента, поступающего с веб-сайта, с тем же элементом, который был вставлен в пустой <iframe> . Логика здесь заключалась в том, что в пустой <iframe> нет таблиц стилей, поэтому каждый добавленный в нее элемент имеет только стили браузера по умолчанию. Таким образом, я смог избавиться от большинства свойств, которые были незначительными.

Проблема 3 — сохранение только сокращенных свойств

Следующее, что я заметил, это то, что свойства, имеющие сокращенный эквивалент, были излишне распечатаны (например, было border: solid black 1px , а затем border-color: black; , border-width: 1px itd.).
Чтобы решить эту проблему, я просто создал список свойств с сокращенными эквивалентами и отфильтровал их из результатов.

Проблема 4 — удаление префиксных свойств

Количество свойств в каждом правиле было значительно ниже после предыдущей операции, но я обнаружил, что у меня было много префиксов -webkit- , о которых я никогда не слышал ( -webkit-app-region ? -webkit-text-emphasis-position ?).
Мне было интересно, следует ли мне сохранять какие-либо из этих свойств, потому что некоторые из них казались полезными ( -webkit-transform-origin , -webkit-perspective-origin и т.д.). Я не понял, как это проверить, и поскольку я знал, что большую часть времени эти свойства являются просто мусором, я решил удалить их все.

Проблема 5 — объединение одних и тех же правил CSS

Следующая проблема, которую я заметил, заключалась в том, что одни и те же правила CSS повторяются снова и снова (например, для каждого <li> с точно такими же стилями было создано одно и то же правило в созданном CSS файле).
Это просто вопрос сравнения правил друг с другом и объединения их, которые имели точно такой же набор свойств и значений. В результате вместо #LI_1<. >, #LI_2 <. >я получил #LI_1, #LI_2 <. >.

Проблема 6 — очистка и исправление отступа HTML

Поскольку я был доволен результатом, я перешел в HTML. Это выглядело как беспорядок, главным образом потому, что свойство outerHTML сохраняет формат в точности так, как оно было возвращено с сервера.
Единственным кодом HTML, взятым из outerHTML , был простой переформатирование кода. Поскольку это что-то доступно в каждой среде IDE, я был уверен, что есть библиотека JavaScript, которая делает именно это. И получается, что я был прав (jquery-clean). Что еще, у меня лишние атрибуты удаления ( style , data-ng-repeat и т.д.).

Проблема 7 — фильтрует нарушение CSS

Так как есть вероятность, что в некоторых случаях фильтры, упомянутые выше, могут сломать CSS во фрагменте, я сделал все из них необязательным. Вы можете отключить их из меню "Настройки".

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *