Разное

Css и js: HTML, CSS и JavaScript в вебе (поймут даже чайники) — Офтоп на vc.ru

16.06.2023

Содержание

Что такое CSS-in-JS и чем отличается от обычного CSS

Стилизация страниц всегда происходит с помощью CSS. В веб-разработке принято разделять HTML и CSS файлы, подключая их друг к другу. Стилизация с использованием JavaScript (JS) в стандартных ситуациях происходит в тех случаях, когда требуется прописать изменение стилей при определенных условиях взаимодействия. Например, пользователь нажал на кнопку и появился какой-нибудь дополнительный блок, который по умолчанию скрыт. Подход CSS-in-JS предполагает вместо стандартных CSS-файлов со стилями использовать скриптовые файлы, где будут также прописываться стили.

Далее разберемся, какие особенности есть у подхода CSS-in-JS, когда он оправдан.

Различия CSS и JavaScript

Они очевидны:

  • JS – это язык программирования. Его функционал позволяет задавать условия, получать и менять переменные в зависимости от условий. Однако сам по себе он не предназначен для разметки и стилизации. В веб-разработке он служит чем-то вроде “элемента интерактивности”, так как позволяет задать модель поведения стилей в зависимости от тех или иных условий.
  • CSS – это язык разметки. Изначально в нем нельзя задавать никаких условий и переменных, хотя в новых версиях эта возможность постепенно начинает реализовываться. Если использовать только CSS для оформления страницы, то вы, конечно же, сможете создать красивый и удобный интерфейс, но он не будет интерактивным.

Связка CSS и JavaScript позволяет добиться интерактивности и удобства пользовательского интерфейса.

Что такое CSS-in-JS

CSS-in-JS иногда еще называют JSS, хотя это название отдельной библиотеки, а не технологии. Главная особенность заключается не только в том, что стилизация происходит в скриптовых файлах с расширением .js, но и в том, что сам язык JavaScript используется для описания стилей в удобном и декларативном виде. Подобный подход реализован во многих популярных библиотеках и фреймворках. Например, в React большая часть работы происходит со styled-components – это элементы CSS-in-JS.

Вот пример использования такого компонента:

// Create a <Title> react component that renders an <h2> which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h2`
   font-size: 1.5em;
   text-align: center;
   color: palevioletred;
`;

Здесь создается заголовок h2 на основе данных, содержащихся внутри тега <title>. К нему сразу же задаются стили, которые будут меняться в зависимости от определенных условий.

Примечательно, что эффективно использовать CSS-in-JS без каких-то сторонних библиотек не получится, так как для его корректной работы требуется развертывание вспомогательных файлов. Все это есть внутри библиотек.

Преимущества CSS-in-JS

У этой технологии есть собственный перечень весомых преимуществ:

  • Компонентный подход. В случае работы с чистым CSS для каждого более-менее важного элемента на странице, например, секции, рекомендуется создавать отдельный файл. Когда речь идет о большом проекте, то таких файлов становится слишком много, а если писать все в одном файле, то в нем будет сложнее ориентироваться, следовательно, поддержка будет осложнена. В случае с CSS-in-JS используется принцип модульности, что позволяет избавиться от большого количества файлов и сделать структуру проекта чуть проще.

Файловая структура при задании стилей через обычный CSS

  • Активно используются возможности JavaScript. Это значит, что вам будет значительно проще задавать условия изменения стилей, делая интерфейс более интерактивным.
  • Можно менять стандартную логику CSS. Простой пример: свойства, которые не заданы явно, наследуются от родительского элемента. Иногда это мешает процессу верстки. Благодаря тому, что в CSS-in-JS можно задавать свои правила, вы можете изолировать как группу элементов, так и вообще весь документ, отключив для них наследование свойств родителя.
  • Селекторам можно ограничить область видимости. Проблема с уникальными именами (они же селекторы) возникает в любом более-менее сложном проекте и/или в ситуациях, когда к проекту требуется добавить большой сторонний код. Происходит коллизия селекторов, из-за чего стили перестают отображаться корректно. В JSS можно настроить автоматическую генерацию уникальных названий селекторов или просто ограничить область видимости, благодаря чему даже если в документе и будет два одинаковых селектора, то в конфликт друг с другом они вступать не будут.
  • Префиксы больше не нужны. В стандартном CSS для того, чтобы некоторые свойства корректно отображались в том или ином браузере им требуется задавать определенные префиксы. Мало того, что разработчику нужно знать, поддерживается ли то или иное свойство без префикса, так их еще нужно вставлять в код, увеличивая его размер и тратя дополнительное время. В CSS-in-JS расстановка нужных префиксов происходит автоматически.
  • Отличная совместимость как JS, так и CSS свойств между собой. Помимо простых свойств полностью совместимы константы и функции. Плюс, они еще и взаимозаменяемы.
  • В DOM попадают только стили, использующиеся у отображенных в данный момент на экране элементов. Это уменьшает время, необходимое для загрузки страницы и вообще сильно облегчает ее.
  • Есть возможность тестировать работоспособность CSS в виде модулей, в том числе изолированных. Такой подход позволяет оперативнее обнаружить ошибки и исправить их с минимальным риском вызвать появление других ошибок.

Недостатки CSS-in-JS

Основная их масса связана в первую очередь с необходимостью обучения и формированием нестандартного подхода к разработке:

  • Требуется освоить новый подход. Знать по отдельность CSS и JavaScript будет недостаточно, хотя это поможет в освоении. Основная проблема в том, что чистый подход CSS-in-JS практически не используется в разработке, а только вкупе со сторонними библиотеками или фреймворками, поэтому изучать желательно их.
  • Придется привыкать к новым зависимостям и логике. Они отличаются от стандартного CSS. Сделано это для упрощения разработке, однако быстро адаптироваться к изменению базовых принципов получается далеко не у всех разработчиков.

Пример записи кода формата CSS-in-JS

  • Потребуется изучать дополнительные библиотеки и фреймворки. Так как CSS-in-JS не используется в отрыве от сторонних инструментов, то для эффективной работы придется осваивать и их. Хотя бы на базовом уровне.
  • Скрипты, разметку и стилизацию придется вести в одном файле. С одной стороны это может упростить процесс написания кода, так как не требуется создания кучи вспомогательных файлов под разные задачи, но с другой стороны код, сваленный в один файл вызывает множество неудобств.

В несложных проектах, где не требуется серьезной интерактивности, например, в Landing Page, оправданно использовать стандартный CSS с препроцессорами.

Они очень легко осваитваются и дают некоторые дополнительные фишки, которые есть в JSS, например, возможность создавать переменные.

Когда использовать CSS, а когда JSS

При всех своих преимуществах, CSS-in-JS далеко не всегда рекомендуется использовать. Вот перечень типов проектов, использование в которых JSS оправдано:

  • Разработка ведется с использованием динамических библиотек и фреймворков, например, React, Vue, JSS (это еще и библиотека) и подобных. Вся логика работы с этими инструментами строится на использовании подхода CSS-in-JavaScript, поэтому работать с ним будет необходимо в любом случае.

Пример кода из React

  • Требуется высокий уровень интерактивности. Плотная интеграция CSS с JavaScript позволяет упростить разработку отзывчивых пользовательских интерфейсов, чем классический подход.
  • По тем или иным причинам требуется использовать модульную архитектуру в процессе разработки. Это значит, что обязательно придется прибегать как раз к тем библиотекам, в основе которых находится принцип CSS-in-JS.

В остальных случаях будет разумнее вести разработку с использованием стандартного CSS и JS.

Популярные мифы и заблуждения

CSS-in-JS появился достаточно давно, плюс, он в том или ином виде распространен в популярных библиотеках и фреймворках. Тем не менее, в среде разработчиков есть популярные заблуждения.

Заблуждение 1: Только CSS-in-JS способен корректно решить проблему конфликта имен и стилей

Нет, не только он, хотя эта особенность и является одним из его весомых преимуществ. Однако это далеко не безальтернативный вариант – есть CSS Modules, Shadow DOM, соглашения по наименованиям BEM, различные соглашения внутри команды разработчиков. Да, их использование не всегда удобно, так как иногда требуется отдельное подключение и настройка, но альтернатива styled-components все равно есть.

Заблуждение 2: styled-components позволяют получать более компактный код

Не во всех ситуациях. Дело в том, что общее количество символов и строк будет зависеть от длины имен, сложности обозначаемых условий, наличия разных дополнений. Выигрыш может быть только при использовании самых базовых компонентов и примитивных условий. Также компактный код не гарантирует удобство чтения и/или более лучшую оптимизацию – современное интернет-соединение без проблем проработает несколько лишних килобайт данных.

Пример записи styled-components

Заблуждение 3: Упрощается расширение стилей

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

const Button = styled.button`
   padding: 10px;
`;
const TomatoButton = Button.extend`
color: #f00;
`;

Так выглядит код в JSS. Здесь добавляется цвет для кнопки. Но вот такой же код в классическом CSS:

button {
   padding: 10px;
}
button.tomato-button {
   color: #f00;
}

Первый вариант смотрится сложнее. Упрощение в расширение стилей с использованием CSS-in-JS можно добиться только в случаях, когда требуется задать сложные стили с определенными условиями для расширения. В обычных ситуациях лучше использовать CSS, а если функционала недостаточно, то препроцессоры.

Заблуждение 4: Улучшается организация кода

Основной аргумент здесь такой: написаний разметки, стилей и скриптов в одном файле для конкретного компонента делает организацию рабочего пространства более удобной. Это действительно может улучшить организацию, но чаще приводит к появлению беспорядочного набора кода, каждый кусок которого может отвечать за абсолютно разные задачи. Пускай создание специализированных файлов и их связка друг с другом требует времени, она вносит гораздо больше порядка в проект, чем написание кода, пускай разделенного на блоки, в одном файле.

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

Заблуждение 5: Процесс разработки очень удобен

Нужно только к нему приноровиться. Возможно, тем, кто работает преимущественно с фреймворками и разными вспомогательными библиотеками процесс разработки действительно покажется более удобным. Однако для тех, кто привык к классической верстке сразу становятся заметны несколько проблем:

  • Любая ошибка в стилях приводит к невозможности корректной работы всего приложения или сайта. Системное сообщение об ошибке часто в таких ситуациях очень длинное и не очень понятное – не сразу можно догадаться, что проблема в стилях. В CSS же ошибка в стиле приведет к неправильному отображению элемента, в стилях которого была допущена ошибка, но не более. Плюс, по этому элементу и его поведению будет очень легко вычислить в какой части кода была допущена ошибка.
  • В CSS у каждого элемента легко отследить className. При использовании же styled-components такой возможности нет, поэтому придется постоянно переключаться между React element tree и DevTools DOM tree.

Заблуждение 6: Ускоряется работа приложения

Это не так и вот почему:

  • Чтобы styled-components отобразились в браузере они должны быть изначально добавлены в DOM и только оттуда выведены в браузере. Это дополнительное время, пускай и занимающее доли секунды. Также это усложнение общей цепочки, что повышает риск некорректного выведения, так как на этом из этапов цепи может произойти ошибка.
  • Так как скрипты, стили и разметка находятся в одном файле, то их кеширование будет занимать больше времени, следовательно, при первом посещении страница будет грузиться дольше.
  • Анимация возможна только через keyframes.

Заключение

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

Сравнение производительности CSS и CSS-in-JS в реальном мире / Хабр

Технология CSS-in-JS заняла прочное место среди инструментов фронтенд-разработки. И возникает ощущение, что CSS-in-JS-тренд в ближайшем будущем лишь усилится. Особенно — в мире React. Например, в исследовании State of CSS, проведённом в 2020 году, приняли участие 11492 человека. Лишь 14,3% из них не слышали о Styled Components (о ведущей CSS-in-JS-библиотеке). А вот пользовались этой библиотекой более 40% участников исследования.

Мне уже давно хотелось найти серьёзный материал, посвящённый сравнению производительности CSS-in-JS-библиотек, вроде Styled Components, и доброго старого CSS. Но я, к сожалению, ничего такого, вроде сравнения их производительности на реальном проекте, а не на каком-то простом наборе тестов, найти не смог. Поэтому я решил сам сделать такое сравнение. Я перевёл реальное приложение со Styled Components на Linaria, на библиотеку, которая выполняет извлечение CSS в файлы во время сборки проекта. В результате в приложении, использующем Linaria, не выполняется генерирование стилей во время работы этого приложения на компьютере пользователя.

Прежде чем мы приступим к делу — хочу прояснить некоторые вещи. Я не отношу себя к людям, которые ненавидят CSS-in-JS. Я признаю то, что эта технология отличается отличным «опытом разработчика» (Developer Experience, DX), и то, что она обладает замечательной моделью композиции, унаследованной от React. CSS-in-JS способна дать разработчикам много хорошего (почитать об этом можно здесь). Да и я сам пользуюсь библиотекой Styled Components в нескольких собственных проектах и в проектах, над которыми мне доводилось работать. Но мне всегда было интересно знать о том, сколько пользователям веб-проектов приходится платить за те удобства, которые даёт разработчикам CSS-in-JS.

Да, если вас интересуют лишь мои выводы — то вот они: не используйте CSS-in-JS с вычислением стилей во время работы программы в том случае, если вы заботитесь о скорости загрузки вашего сайта. Тут всё просто: чем меньше JavaScript-кода — тем быстрее сайт. И с этим ничего особо поделать нельзя. Если же вам интересно узнать о том, как я пришёл к таким выводам — продолжайте читать.

Что и как я измерял

Приложение, которое я использовал в тестах — это вполне обычный React-проект. Его основа создана с помощью Create React App (CRA), в нём используется Redux и Styled Components (v5). Это — достаточно большое приложение с множеством экранов, с настраиваемой панелью управления, с поддержкой тем и со многими другими возможностями. Так как оно было создано с помощью CRA — оно не поддерживает серверный рендеринг, в результате всё рендерится на стороне клиента (речь идёт о B2B-приложении, в перечне требований к нему серверного рендеринга не было).

Я взял это приложение и заменил Styled Components на библиотеку Linaria, которая, как мне казалось, имеет похожий API. Я полагал, что перейти со Styled Components на Linaria будет просто. Но, на самом деле, перевод приложения на новую библиотеку стилизации потребовал определённых усилий. А именно, на то, чтобы перевести приложение на Linaria, у меня ушло два месяца. Но даже после того, как у меня получилось что-то такое, с чем уже можно было работать, переведены были лишь несколько страниц, а не всё приложение. Подозреваю, что именно поэтому никто и не проводит таких сравнений, которое решил провести я. Единственное изменение, которое я внёс в приложение, было представлено заменой одной библиотеки стилизации на другую. Всё остальное осталось нетронутым.

Для запуска различных тестов, направленных на исследование двух страниц, которые используются чаще всего, я пользовался инструментами разработчика Chrome. Я всегда запускал тесты по три раза. Представленные здесь цифры — это средние показатели по трём запускам тестов. Во всех тестах я устанавливал, на вкладке Performance, значение 4x slowdown для параметра CPU и значение Slow 3G для параметра Network. Для исследования производительности я использовал отдельный профиль Chrome без каких-либо расширений.

Вот какие испытания я провёл:

  1. Анализ сетевой активности приложения (размер JS- и CSS-ресурсов, анализ используемого кода, количество запросов).
  2. Исследование производительности в Lighthouse (аудит производительности с применением мобильных предустановок).
  3. Профилирование производительности (исследование загрузки страниц и особенностей drag-and-drop-взаимодействия с ними).

Анализ сетевой активности приложения

Начнём с анализа сетевой активности приложения. Одной из сильных сторон CSS-in-JS является тот факт, что при использовании этой технологии в приложение не попадает ненужных стилей. Верно? Ну, на самом деле, это не совсем так. Когда на странице имеется лишь один активный стиль, вместе с ним могут загрузиться и ненужные стили. Но эти стили находятся не в отдельном файле, а в JS-бандле.

Вот данные, полученные при исследовании домашней страницы двух вариантов приложения. Один из них, напомню, создан с использованием Styled Components, а второй — с помощью Linaria. Показатель до косой черты — это размер данных, сжатых gzip, а после косой черты идёт размер несжатых данных.

Сравнение сетевых показателей домашней страницы двух вариантов приложения.

Styled Components Linaria
Общее количество запросов 11 13
Общий размер 361Кб/1,8MB 356Кб/1,8Мб
Размер CSS 2,3Кб/7,2Кб 14,7Кб/71,5Кб
Количество CSS-запросов 1 3
Размер JS 322Кб/1,8Мб 305Кб/1,7Мб
Количество JS-запросов 6 6

Сравнение сетевых показателей поисковой страницы двух вариантов приложения.

Styled Components Linaria
Общее количество запросов 10 12
Общий размер 395Кб/1,9Мб 391Кб/1,9Мб
Размер CSS 2,3Кб/7,2Кб 16,0Кб/70,0Кб
Количество CSS-запросов 1 3
Размер JS 363Кб/1,9Мб 345Кб /1,8Мб
Количество JS-запросов 6 6

Даже несмотря на то, что в Linaria-варианте приложения значительно возрос объём загружаемого CSS-кода, общий объём загружаемых данных снизился у обеих страниц (хотя в данном случае эта разница почти незаметна). Но самое важное тут то, что общий объём CSS- и JS-данных Linaria-варианта страниц меньше, чем размер JS-бандла того варианта приложения, в котором используется Styled Components.

Анализ используемого кода

Если проанализировать объём используемого кода, то окажется, что в Linaria-варианте приложения имеется большой объём (около 55 Кб) неиспользуемого CSS-кода. А в приложении, где применяется Styled Components это — всего 6 Кб (причём это — CSS из npm-пакета, а не из самой библиотеки Styled Components). Размер неиспользуемого JS-кода в Linaria-варианте приложения на 20 Кб меньше, чем в Styled Components-варианте. Но общий объём неиспользуемого кода больше там, где применяется Linaria. Это — один из компромиссов, на которые приходится идти тому, кто использует внешний CSS.

Анализ используемого кода домашней страницы.

Styled Components Linaria
Размер неиспользуемого CSS 6,5Кб 55,6Кб
Размер неиспользуемого JS 932Кб 915Кб
Общий размер 938,5Кб 970,6Кб

Анализ используемого кода поисковой страницы.

Styled Components Linaria
Размер неиспользуемого CSS 6,3Кб 52,9Кб
Размер неиспользуемого JS 937Кб 912Кб
Общий размер 938,5Кб 970,6Кб


Аудит производительности в Lighthouse

Если уж мы говорим об анализе производительности — непростительно будет не взглянуть на то, что выдаёт Lighthouse. Сравнение показателей (средние значения после трёх запусков Lighthouse) можно видеть на нижеприведённых диаграммах. Тут, помимо показателей группы Web Vitals, имеются ещё два показателя — Main thread work и Execution time. Main thread work — это время парсинга, компиляции и запуска ресурсов, большая часть которого уходит на работу с JS, хотя вклад в этот показатель вносят и подготовка макета страницы, и вычисление стилей, и вывод данных, и другие процессы. Execution time — это время выполнения JS-кода. Я не включил сюда показатель Cumulative Layout Shift, так как он близок к нулю, и он выглядит практически одинаково для вариантов приложения, в котором используется Linaria и Styled Components.

Показатели Lighthouse для домашней страницы

Показатели Lighthouse для поисковой страницы

Как видите, Linaria-вариант приложения лучше, чем Styled Components-вариант, выглядит в Web Vitals-тестах (он показал худший результат лишь однажды, по показателю CLS). Иногда преимущество оказывается довольно-таки значительным. Например, на домашней странице показатель LCP оказывается лучше на 870 мс, а на поисковой странице — на 1,2 с. Страница, на которой используется обычный CSS, не только быстрее рендерится, но и требует меньше ресурсов. А время блокировки и время, необходимое на выполнение всего JS-кода, соответственно, меньше на 300 мс и примерно на 1,3 с.

Профилирование производительности

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

Профилирование производительности домашней страницы

Профилирование производительности поисковой страницы

На страницах, при создании которых используется библиотека Styled Components, имеется больше задач, выполняющихся длительное время. И на завершение этих задач, в сравнении с Linaria-вариантом страниц, нужно больше времени.

Для того чтобы рассмотреть данные профилирования производительности под несколько иным углом, ниже я привёл совмещённые графики загрузки Styled Components-варианта домашней страницы (выше) и её Linaria-варианта (ниже).

Сравнение процесса загрузки разных вариантов домашней страницы

Сравнение особенностей drag-and-drop-взаимодействия со страницами

Я решил сравнить страницы не только по показателям их загрузки, но и на предмет их быстродействия при работе с ними. А именно, я измерил производительность страниц при выполнении действий, предусматривающих перетаскивание элементов и размещение их по группам. Итоговые результаты приведены ниже. Как видно, даже в этом тесте Linaria побеждает Styled Components в нескольких категориях.

Styled Components Linaria Разница
Показатель Scripting, мс 2955 2392 -563
Показатель Rendering, мс 3002 2525 -477
Показатель Painting, мс 329 313 -16
Общее время блокировки, мс 1862,66 994,07 -868


Сравнение процесса взаимодействия с разными вариантами страницы

Итоги

Вот и всё. Как видите, использование технологии CSS-in-JS, предусматривающей вычисление стилей во время работы страницы, оказывает заметное воздействие на производительность. Это актуально, в основном, для недорогих устройств и для регионов с медленными или дорогими интернет-каналами. Поэтому, возможно, нам следует ответственнее подходить к тому, какие именно инструменты мы выбираем, и к тому, как именно ими пользуемся. Отличный «опыт разработчика» не должен достигаться ценой ухудшения «пользовательского опыта».

Я полагаю, что мы (разработчики) должны больше размышлять о том, каковы последствия выбора тех или иных инструментов. Когда я в следующий раз начну работу над новым проектом — технологией CSS-in-JS я больше пользоваться не буду. Я либо применю обычный CSS, либо воспользуюсь альтернативой CSS-in-JS, библиотекой, занимающейся обработкой стилей во время сборки проекта и извлекающей стили из JS-бандлов.

Я думаю, что следующим значительным феноменом мира CSS станут CSS-in-JS-библиотеки, обрабатывающие стили во время сборки проектов. Дело в том, что появляется всё больше и больше таких библиотек (например — свежайшая vanilla-extract от Seek). Да и крупные компании тоже двигаются в этом направлении, например — Facebook.

Как вы относитесь к CSS-in-JS?


CSS против JavaScript | Узнайте 5 важных отличий

CSS — это язык стилей, используемый для оформления HTML-страниц, чтобы их можно было использовать для привлечения пользователей. JavaScript — это язык программирования, который изменяет внешний вид веб-страниц, и он является динамическим. CSS статичен и связан с цветом, положением, размером и стилем веб-страниц, а внешний вид сделан красивым. JavaScript вступает в игру, если цвета задаются в зависимости от времени года или любых других причин. По сути, если для стиля необходимо применить какую-либо логику, необходимо использовать JavaScript, тогда как если это только стиль, то используется CSS.

Что такое CSS?

CSS предназначен для разделения введения и содержания, включая дизайн, оттенки и текстовые стили. Этот раздел может повысить открытость контента, обеспечить дополнительную адаптируемость и контроль, особенно в отношении основных моментов, разрешить другим страницам веб-сайта совместно использовать структуру, устанавливая правильный CSS в другом. Кроме того, разделение конфигурации и материала делает практичным отображение соответствующей страницы разметки в нескольких стилях для различных методов рендеринга, например, на экране, в печати, с помощью голоса (через программу на основе дискурса или пользователя экрана), а также на Физические гаджеты на основе Брайля. CSS также содержит правила для произвольного дизайна, если материал доступен с мобильного телефона. Заголовок «Каскадирование» начинается с предопределенного плана наклона, чтобы выбрать, какое правило стиля применяется, если более одного стандарта соответствует определенному компоненту. Эта структура каскадных потребностей неудивительна. Детали CSS контролируются Консорциумом World Wide Web (W3C). Контент/CSS типа веб-медиа (тип MIME) был зачислен для использования с CSS согласно RFC 2318 от 19 марта. 98. W3C продвигает бесплатное преимущество одобрения CSS для записей CSS.

Помимо HTML, различные диалекты разметки поддерживают использование CSS, включая XHTML, простой XML, SVG и XUL. Часть преимуществ CSS включает в себя более быстрый стек страниц, простоту обслуживания, улучшенные стили для HTML, совместимость с несколькими устройствами, глобальные веб-рекомендации и экономию времени.

Что такое JavaScript?

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

Кроме того, каждый настоящий интернет-браузер имеет специальный двигатель JavaScript для его выполнения. У него есть API для работы с контентом, кластерами, датами, обычными артикуляциями и необходимым контролем DOM. Тем не менее, сам диалект не содержит никаких вводов-выводов, таких как офисы организации, мощности или иллюстраций, в зависимости от того, в каком состоянии хоста он имплантирован. Во-первых, прямо реализованная клиентская сторона в интернет-браузерах, двигатели JavaScript постепенно координируются в несколько различных видов хост-программирования, включая серверную часть в веб-серверах и базах данных, а также не-веб-проекты, такие как текстовые процессоры и PDF. программирование, а также в ситуациях выполнения, которые делают JavaScript открытым для создания универсальных и рабочих приложений, включая гаджеты рабочей области. Несмотря на то, что между JavaScript и Java есть основные внешние сходства, включая название диалекта, грамматику и отдельные стандартные библиотеки, эти два диалекта индивидуальны и значительно отличаются в плане; На JavaScript повлияли диалекты программирования, например, Self и Scheme.

Прямое сравнение между CSS и JavaScript (инфографика)

Ниже приведены 5 основных различий между CSS и JavaScript

Ключевые различия между CSS и JavaScript

Оба варианта популярны на рынке; давайте обсудим некоторые из основных отличий:

  • Каскадные таблицы стилей (CSS) — это приложение, используемое для создания или организации страниц веб-сайта. CSS не работает сам по себе, даже если он тесно связан с диалектами для создания сайтов. В основном он создается для HTML и XML, чтобы предоставить как инженерам сайта, так и клиентам дополнительные возможности в отношении своих форматов, таких как стилизация, размещение и структурирование шоу. Каждая веб-программа поддерживает CSS. И наоборот, JavaScript предназначен для страниц, использующих HTML. Он поддерживается всеми реальными приложениями, например, Internet Explorer и Firefox. С помощью JavaScript вы можете добавить больше возможностей и сообщений на страницу своего сайта. JavaScript — это диалект сценариев, обычно внедряемый специально для HTML-страниц. С помощью JavaScript вы можете отвечать на определенные компоненты HTML при нажатии на них. Он также может распознавать гостевую программу, читать и изменять содержимое части, и его вполне можно использовать для восстановления и хранения данных с гостевого компьютера.
  • CSS значительно удобнее и необходим для организации и структурирования страниц веб-сайта. Â JavaScript получил дальнейшее развитие и дает больше возможностей и возможностей для совместной работы на странице веб-сайта.
  • Каждая программа поддерживает CSS, а JavaScript поддерживается только реальными приложениями.
  • JavaScript может подтверждать кадры, может использоваться для распознавания гостевых программ и может использоваться для восстановления дополнительных данных с гостевых компьютеров.
  • Тег