Сравнить два css файла
Обновлено: 04.07.2024
кто-нибудь знает хороший инструмент, который может анализировать и сравнивать две таблицы стилей CSS, чтобы найти, какие селекторы имеют разные стили?
Я не могу использовать стандартный инструмент, подобный diff, потому что два файла CSS имеют очень разный макет. Мне нужен инструмент, который может анализировать и понимать CSS, а затем искать селекторы, которые на самом деле имеют разные стили в двух таблицах стилей.
единственный инструмент, который я нашел-это CSS Comparer от Алана Харта, однако он запутывается, когда есть стили, которые применяются к нескольким селекторам.
вот что я сделал, если у кого-то еще есть такая же проблема:
- Я CSSTidy чтобы "нормализовать" две таблицы стилей, которые я хотел сравнить. Нормализация в моем случае означала разделение нескольких селекторов и сортировку селекторов и свойств. Доступна онлайн-версия CSSTidy здесь.
- после этого, я использовал CSS Comparer инструмент от Алана Харта чтобы узнать различия между этими двумя таблица стилей.
Это сделало работу для моих конкретных требований.
Я пробовал использовать сравнение CSS. Кажется, он делает именно то, что вы ищете. Однако, похоже, есть некоторые проблемы с несколькими селекторами. Приятная часть заключается в том, что она управляется командной строкой, поэтому вы можете настроить автоматический процесс, если у вас есть много файлов CSS, или вы можете связать файлы CSS вместе, чтобы сравнить их с одним гигантским результирующим файлом SASS. Этот инструмент покажет вам все различия, включая различия в значениях классов.
Что бы было бы очень приятно, если бы инструмент показал вам, какие стили превзошли другие стили в той же таблице стилей. Многие старые сайты имеют много багажа таким образом, и отфильтровать его было бы здорово. Конечно, автоматический инструмент может вызвать проблемы, но, по крайней мере, то, что генерирует отчет, как Firebug, за исключением каждого селектора и всей коллекции CSS-файлов, было бы здорово. К сожалению, сравнение CSS - это не такой инструмент, и я не знаю одного:(
Я бы загрузил веб-страницу, используя одну таблицу стилей на одной вкладке и другую таблицу стилей на другой вкладке. Затем используйте инспектор или Firebug, чтобы проверить стиль соответствующих узлов.
Это очень вручную, очевидно, но то, что вы просите, - это такая повязка для сломанного процесса, что вы, вероятно, не найдете большой помощи.
Если у вас есть некоторый опыт программирования, вы, вероятно, могли бы написать парсер самостоятельно довольно легко, который сообщает каждый определенный класс и его стиль. Однако это, скорее всего, больше работы,чем стоит.
Используйте бесплатный онлайн инструмент Code Diff для сравнения двух текстовых файлов.
С помощью этого инструмента можно легко выделить различия между двумя текстами. Инструмент очень легко используется. В отдельных блоках введите два текста и получите результат внизу. Инструмент наглядно отобразит различия между двумя текстовыми областями, выделяя измененные части красным цветом. Вы можете сами выбрать метод сравнения текстов (посимвольно, пословно и построчно).
Инструмент используется, чтобы показать различия между двумя версиями одного и того же файла. Современные реализации поддерживают также двоичные файлы. Вывод называется "diff", или патч, так как он может быть применен с программой patch (программная утилита Unix).
Diff-утилита была разработана в начале 1970-х годов для операционной системы Unix. Финальная версия была полностью разработана Дугласом Макилроем. Алгоритм стал известен как алгоритм Ханта-Макилроя.
Модификации с 1975 года включают улучшение основного алгоритма, добавление новых ключей команды и новые форматы вывода. Базовый алгоритм описывается в книгах Юджина В. Майерса "An O(ND) Difference Algorithm and its Variations" и в книге "A File Comparison Program" Вебба Миллера и Майерса. Алгоритм был независимо разработан и описан Е. Укконеном в "Algorithms for Approximate String Matching". Первые версии программы diff были разработаны для сравнения строк текстовых файлов, рассчитывая, что символ новой строки разделит строки. В 1980-х годах поддержка двоичных файлов привела к изменениям в разработке и реализации программы.
Почему использовать инструмент Code Diff?
Сейчас очень распространено явление, когда люди копируют текст из одного сайта и публикуют его как свой собственный контент, что непрофессионально и называется плагиатом (plagiarism). Этот инструмент поможет вам избегать плагиата. Необходимо скопировать два текста, и инструмент покажет, в каких частях есть плагиат. Учитывайте также, что контент с плагиатом приносит меньше трафика. Если ваш контент можно найти на других сайтах, это приносит меньше трафика, так как вы не обеспечиваете хороший контент для посетителей.
Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском.
Закрыт 5 лет назад .
Какие есть программы для быстрого сравнения двух файлов JavaScript, HTML, CSS, аналогично VCS-системам? То есть, передаёшь два файла, а программа показывает, чем они отличаются, и в каких строках. Но для любых локальных файлов, без какой-то централизованной системы и установки.
Если под Linux, то идеально подходит встроенная утилита diff.
Советую посмотреть в сторону Winmerge
1) Софт только для Windows (ув-мый ТС не указал свою ОС). // 2) Разработка прекратилась, см. неутешительную статистику багтрекера.- Когда просите посоветовать программу, всегда указывайте свою операционную систему.
- Здесь подобные вопросы закрываются, специально для них служит сайт Software Reccomendations.
Быстрее и удобнее не открывать лишний раз сторонние программы, а когда всё и сразу совершается в одном редакторе/IDE.
Решения для Sublime Text 3
Быстрое
Плагин FileDiffs, документация там же, по ссылке.
Выделяются сами различия между файлами и приводятся номера строк — лично мне этого вполне хватает.
Продвинутое
Плагин Sublimerge 3, инструкция по установке в конце страницы. Он Freemium, но если не желаете отдавать деньги, придётся только иногда (достаточно нечасто) терпеть всплывающее окно с предложением его купить. Пример работы:
Из преимуществ отметил бы возможность интеграции с системами контроля версий SVN, Git и Mercurial (Bazaar пока не поддерживается). Например, чтобы сравнить файл в локальном хранилище с любой из его версий на удалённом репозитории, необходимо кликнуть где-нибудь в тексте этого файла правой кнопкой мыши, в появляющемся контекстном меню Sublimerge → Compare to revision. → выбираем требуемую версию для сравнения.
Однажды возникла необходимость создать дочернюю тему Вордпресс, чтобы обновить родительскую. Проблема была в том, что я вносил правки в файл style.css родительской темы. А что именно там менял, я, конечно же, не помню (да и не нужно это запоминать).
Но вот, наступил момент, когда появилась новая версия темы для Вордпресс. Мне, конечно же хотелось посмотреть, че там нового. Но, прежде, чем обновить ее, сначала нужно было сохранить внесенные в стили изменения. Поэтому, пришлось вспоминать название программы, которая сравнивает файлы.
WinMerge
Но есть кое-что попроще.
Quick Diff
Преимущества онлайновго сервиса
- Простой и понятный интерфейс.
- Сравнение файлов происходит в считанные секунды.
- Никакой предварительной регистрации.
- Ничего не нужно скачивать и устанавливать.
- Абсолютно бесплатен.
Как сравнить два текстовых фрагмента
Для сравнения достаточно скопировать нужные фрагменты в соответствующие поля Left и Right (без разницы) и нажать кнопку Compare.
Результат будет ниже, под заголовком Output.
Пояснения
Красным цветом подсвечено то, чего в нет в обновленном файле, зеленым — внесенные изменения в исходный файл.
Но в данном примере, отличия только в том, что в измененном фрагменте присутствуют пробелы в начале строки. Поэтому он выделен зеленым цветом. Возможно этот код вырезался, но потом когда вставлялся обратно, получилось со смещением и появились лишние пробелы.
В общем, будьте внимательны, смотрите, какие изменения существенны и имеют значения для вас. Здесь я показал пример использования сервиса для сравнения двух файлов стилей. Но вы, можете использовать данный сервис для сравнения, какие правки внес корректор в текст, да, мало ли для чего вам пригодится.
Есть ли функция сравнения, такая как плагин для Notepad ++?
Да, есть, но он интегрирован с инструментами контроля версий, вы не можете попросить его сравнить два произвольных файла, но вы можете попросить контроль версий сравнить две ревизии одного и того же файла или вашего текущего файла в рабочем состоянии. папка с последней проверенной / подтвержденной ревизией.Вы можете сравнивать файлы из проводника либо из раздела рабочих файлов, либо из раздела папок. Вы также можете запустить глобальное действие сравнения из командной палитры.
Да, я только что заметил, что есть возможность выбора файлов для сравнения, но только в открытой папке.щелкните правой кнопкой мыши на первом файле и выберите
затем щелкните правой кнопкой мыши на втором файле и выберите
У меня Visual Studio Code версии 1.27.2 и я могу сделать это:
Сравните два файла
Сравните два документа или вкладки в памяти
Иногда у вас нет двух файлов, но вы хотите скопировать текст откуда-то и выполнить быструю разборку без необходимости сначала сохранять содержимое в файлы. Тогда вы можете сделать это:
Спасибо, сравнить с темой по умолчанию Белая тема лучше, чем темная.Вот мой любимый способ, который я считаю немного менее утомительным, чем шаги «Выбрать для сравнения, затем сравнить с . ».
- Откройте файл левой стороны (не редактируется)
- F1 Сравнить активный файл с .
- Выберите файл с правой стороны (редактируемый) - вы можете выбрать недавний файл из выпадающего списка или щелкнуть любой файл на панели проводника.
Это работает с любыми произвольными файлами, даже с теми, которых нет в каталоге проекта. Вы даже можете просто создать 2 новых файла без названия и скопировать / вставить текст туда же.
Знаете ли вы, существует ли способ сделать оба файла редактируемыми в окне сравнения? Не так далеко, как я знаю. Странно, что вы не можете редактировать оба окна. Это хорошо. Знаете ли вы автоматический способ сдвинуть различия слева направо? Кроме ручного копирования / вставки?Другой вариант использует командную строку:
Примечание. Возможно, вам придется code сначала добавить свой путь. Смотрите: Как вызвать VS Code Editor из командной строки
В вашем терминале введите:
В VS Code откроется вкладка, показывающая различия в двух файлах.
Существует плагин, называемый Partial Diff, который помогает сравнивать выделенные тексты в файле, в разных файлах или в буфере обмена.
Я люблю Partial Diff. Выделите какой-нибудь текст, установите его как левый, выберите еще немного, установите его как правый. Вуаля. Да, я также обнаружил, что Partial Diff очень прост в использовании и очень полезен.Вот ссылка на торговую площадку для расширения. Расширение «Сравнить» помогает сравнить два файла, которые вы можете выбрать из текущего проекта и другой директории на вашем компьютере или в буфере обмена.
Щелкните правой кнопкой мыши на первом файле нажмите «Выбрать для сравнения».
Нажмите 2-й файл, нажмите «Сравнить с выбранным»
Затем, чтобы сравнить два файла:
- Открыть или сфокусировать файл B (по умолчанию будет редактируемым в режиме сравнения). Например, путем перетаскивания из Проводника в центр кода VS.
- Открыть или сфокусировать файл A.
- Нажмите Alt+k , быстрое открытое меню будет показано с сосредоточенным файлом B.
- Нажмите Enter .
Результат: файл A слева и файл B справа. (Проверено на VS Code 1.27.1)
замечания
Если вы хотите сравнить файл в вашем проекте / каталоге с внешним файлом (это, кстати, самый распространенный способ сравнения файлов), вы можете легко перетащить внешний файл на вкладку редактора и просто использовать команду: «Сравнить активный файл с . » на одном из них, выбрав другой в появившемся окне выбора. Это кажется самым быстрым способом.
Читайте также: