| Kosten | Воскресенье, 02 Июня 2019, 23:21 | Сообщение 1 |
| Сначала давайте рассмотрим некоторые основы CSS. Так как в коде сайта CSS работает только в тандеме с HTML, чтобы придать сайту его статическую структуру и стиль. В то время как HTML определяет какие элементы находятся на странице, где CSS определяет как эти элементы HTML отображаются.
Например, если теги HTML отмечают раздел текста как header страницы, то применение CSS сообщает компьютеру, что все что отмечено на этом сайте header, который должно отображаться в определенном стиле, например, жирным синим шрифтом.
Несмотря на то что CSS и HTML работают вместе, они хранятся совершенно отдельно в двух разных файлах. Это удобно, потому что позволяет дизайнерам вносить изменения во внешний вид сайта, не затрагивая его базовую структуру.
Каскадный аспект также является ключевым, это хранение файлов в виде каскадных листов позволяет разработчикам глобально обновлять дизайн для нескольких страниц одновременно. Представьте себе, что вы пытаетесь кодировать дизайн индивидуально для каждой страницы сайта на 1000 страниц, добавляя код шрифта и цвета для каждой отдельной страницы. Также CSS упрощает этот процесс до одного, внешне связанного многоуровневого файла.
Что нового в CSS3?
CSS3 является новейшим стандартом для языка CSS, который разрабатывается с 2005 года. Он обратно совместим со старыми версиями CSS, что имеет новые свойства, которые отлаживают предыдущие особенности и расширяют возможности CSS2, и даже имеет некоторые JavaScript-подобные возможности. CSS3 также решает ряд проблем, связанных с разработкой мобильных приложений, учитывая адаптивный дизайн и устраняя проблемы, вызванные несовместимостью Adobe Flash на мобильных устройствах. В сочетании с JavaScript, CSS3 обладает множеством функциональных возможностей Flash, это с точки зрения анимации и интерактивности.
Вот 7 основных вещей, которые отличают CSS3 от его предшественников.
1. Мобильный первый менталитет
CSS3 по своей природе поддерживает адаптивный дизайн и оснащен для обработки медиа-запросов. Медиа-запросы — это вызовы, выполняемые кодом для определения устройства и размера экрана на котором пользователь просматривает сайт. Это добавляет новые возможности адаптивного дизайна в репертуар CSS.
2. Модульный код
Одним из самых важных достижений является то, что CSS3 разделен на модули. Все старые спецификации CSS были перенесены в новую версию и разделены на более мелкие части, где также добавлены некоторые новые модули.
Другие модули CSS3 включают в себя:
- Селекторы: разработчики могут редактировать элементы по имени, классу, типу, атрибуту и так далее.
- Модуль Box Model: описывает подход к созданию согласованности между HTML-элементами на странице или блоками. Применяя поля границы и отступы к содержимому блока, разработчики могут очистить область вокруг элемента, присвоить ему границы.
- Фоновые изображения и границы, где CSS3 также позволяет лучше контролировать обработку границ элементов и фонов страниц, а также позволяет использовать закругленные углы для прямоугольников и теней. До CSS3 фоны должны были создаваться с помощью изображений, которые увеличивали размер файла и время загрузки страницы.
- Текстовые эффекты: CSS3 включает в себя эффекты тени, переполнение текста, которое скрывает текст и становится слишком длинным для его элемента, разрыв слова, где автоматическое разбиение текста, чтобы он помещался в рамку, и перенос текста — все, что экономит дизайнерам много времени.
3. Поддержка веб-шрифтов
До CSS3 дизайнеры могли использовать только безопасные для сети шрифты, чтобы быть на 100 процентов уверенными, что шрифты всегда будут отображаться одинаково на всех компьютерах. Безопасные веб-шрифты — это шрифты, которые каждый компьютер устанавливает и распознает. Если бы дизайнер использовал обычные шрифты, такие как Times New Roman или Arial, он мог бы в значительной степени гарантировать, что любой пользователь будет просматривать свой сайт так, как задумано. Однако, если они захотят использовать более редкий шрифт, если он не поддерживается машиной пользователя, он по умолчанию вернется к веб-безопасному шрифту.
Дизайнеры теперь могут запускать веб-шрифты в CSS3, специальные шрифты, подобные тем которые доступны через Google Fonts и Typecast. Эти шрифты можно либо загрузить на сервер и запустить с помощью кода CSS, либо получить доступ непосредственно из его источника с помощью сценария, который вызывается прямо в коде CSS, что открыло мир возможностей для дизайнеров.
4. Позволяет быстрее разрабатывать и быстрее загружать
То, что раньше требовалось для фоновых изображений, теперь CSS3 может быть достигнуто с помощью визуальных улучшений, что экономит время разработчиков на производстве. Это сокращает количество вызовов и время загрузки для множества изображений, поскольку все эти эффекты встроены в код. Кроме того, страницы загружаются быстрее благодаря общему меньшему размеру файла и меньшему количеству вызовов.
5. Создание 2D и 3D преобразований, анимации и переходов
Эти эффекты позволяют элементам на странице вращаться, увеличиваться, уменьшаться, переворачиваться или переводиться в другой цвет. Впервые элементы, созданные в CSS могут перемещаться по экрану без использования JavaScript или Flash-кода. С помощью переходов элемент может легко изменять размер и цвет. Вы можете установить длительность перехода, например, создать кнопку, которая медленно расширяется и меняет цвет, когда вы наводите на нее курсор мыши.
6. Новые цвета и эффекты изображения
CSS3 поддерживает новые цвета (RGBA, HSL, HSLA) и цвета градиента, а также позволяет корректировать непрозрачность. Еще одна важная вещь — это поддержка закругленных углов изображения, эффект, который требовал большого форматирования и работы в Photoshop, чтобы достичь ранее.
7. Исправил некоторые досадные проблемы с выравниванием
Размер коробки позволяет разработчикам правильно подобрать размеры элементов без необходимости вычитать размеры для отступов и границ. Благодаря свойству box-sizing, отступ и граница включены в высоту и ширину.
| | Страна: (RU) |
| |
| Kosten | Воскресенье, 02 Июня 2019, 23:31 | Сообщение 2 |
|
| CSS3 против CSS - каскадные таблицы стилей или CSS является ключевым элементом веб-дизайна. Как веб-разработчик или дизайнер, вы должны хорошо понимать CSS, особенно разницу между CSS3 и CSS. Возможно, слышали или пришли через термин CSS3, если вы читали о веб-разработке или веб-дизайне. Все верно: CSS3 и CSS отличаются друг от друга, как HTML и HTML5. CSS3 - это просто последняя итерация CSS. Люди, которые сейчас говорят о кодировании CSS, на самом деле просто ссылаются на CSS3.
Как HTML5, так и CSS3 стали модными словами со значениями, выходящими за рамки их реальных технологий. Они символизируют приверженность определенным основным стандартам веб-разработки вместо использования программного обеспечения. По большей части, шумиха вокруг этих модных слов уже угасла. Большинство компаний, даже те, которые клянутся хранить все внутри себя, согласятся с тем, что соблюдение этих основных стандартов делает жизнь намного проще для всех.
Это принесло много хороших вещей в индустрию и ознаменовало довольно большой шаг вперед для веб-разработки в целом. Предыдущая версия CSS2 была запущена в 1998 году. Это почти 20 лет назад, где единственная версия полученная после запуска в 2011 году, называется CSS2.1. Даже с пересмотром большинство экспертов уже начали говорить, что CSS3 неизбежен. CSS3 имеет ряд функций и возможностей, которые к тому времени стали совершенно необходимыми.
Между CSS3 и CSS есть огромные различия, которые мы скоро увидим. Но факт в том, что веб-браузеры уже были готовы к дополнениям к CSS3 к тому времени, когда он был выпущен. В результате они довольно быстро адаптировались к новому выпуску. Каждый крупный веб-браузер теперь поддерживает CSS3, даже Internet Explorer!
Конечно, W3C все еще продолжает разрабатывать CSS3 и HTML5, поэтому окончательная версия маловероятна. Чтобы быть справедливым, окончательная версия также не является необходимой в данный момент, учитывая, как быстро продвигается интернет. С веб-требованиями и самой индустрией, которая растет и меняется так быстро, кодирование должно продвигаться так же быстро, если не больше.
| | Страна: (RU) |
| |
