CSS *

Проблема с отображением картинок возникла с момента появления адаптивности в интернете. Мы хотим, чтобы сайт хорошо смотрелся на любом планшете, телефоне, в портретной или ландшафтной ориентации экрана, а также на супербольших дисплеях 5K. Также на рынке появились Retina-дисплеи с высокой плотностью пикселей (DPI), где обычные картинки выглядят размытыми. Растет доля мобильного трафика, и крупные ресурсы нацелены на экономную загрузку изображений. Рассмотрим, как решают эти проблемы на сайтах Apple, Tilda и блог-платформе Medium.

С первых строк кода, каждый человек начинает понимать важность правильной его организации и оптимизации рабочего пространства в целом.

В следующий раз, когда вы создадите очередные анимации на основе CSS3, вам может быть полезно перейти в инструменты разработчика Chrome и воспользоваться преимуществами функций проверки и настройки анимации. В этой краткой статье мы расскажем вам о том, какие инструменты анимационной разработки доступны в Chrome, как получить к ним доступ и чем они могут вам помочь.

Если вы хотите протестировать ваши CSS3 анимации с помощью этих инструментов то можете воспользоваться готовым кодом из нашего курса: 10 Проектов CSS3: интерфейс и макет.


Вот полная версия страницы.

Продолжаю публикацию статей Rachel Andrew по особенностям CSS-технологии Flexbox

Предыдущие статьи цикла:

1. Что происходит при создании контейнера Flexbox.
2. Все, что вам нужно знать о выравнивании во Flexbox.
3. Flexbox: насколько велика эта гибкая коробка?.

---

Мы подошли к заключительной части моей серии о Flexbox здесь, в Smashing Magazine. В этом посте я собираюсь потратить некоторое время на размышления о том, каковы на самом деле варианты использования Flexbox, учитывая, что теперь у нас есть CSS Grid Layout, дам некоторые предложения о том, что вы можете использовать, когда и как.

Возникла у нас в команде необходимость в одном выпадающем списке добавить значки к элементам списка в зависимости от типа элемента. Сам список сторонний компонент, который трогать не хотелось. Значки реализованы в виде шрифта, т. е. являются символами юникода.
В качестве решения на сервере в зависимости от типа элемента добавили в качестве обычной буквы символ значка \uXXXX и на клиенте получили красивые квадратики, поскольку шрифт, используемый для списка не содержит в себе коды наших иконок. Тут нам на помощь пришел CSS псевдокласс ::first-letter

Привет всем!

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



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

Вопрос, стоит ли хранить javascript и css ресурсы веб-страницы в LocalStorage браузера или позволить ему самому отрабатывать кэширование, не имеет однозначного ответа. Есть плюсы и минусы. С моей точки зрения, основной плюс — скорость загрузки — перевешивает все остальное. Это очень хорошо чувствуют пользователи EDGE и 3G.

Для поклонников стандартного кэша браузеров, гордо показывающих на слово «Кэшировано» в Средствах разработчика, советую открыть Fiddler и увидеть, что по каждому кэшированному ресурсу за 304 HTTP ответом всё равно идет запрос. Затем советую зайти на что-нибудь типа pingdom.com и увидеть, что непосредственно передача данных во всем времени исполнения запроса занимает проценты. То есть толку в абсолютном значении от такого кэширования — кот наплакал, особенно если файлы небольшие.

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

“ Все ошибки которые допустил frontend разработчик ему вернутся при сборке сайта, все недоработки которые поленился прорисовать дизайнер будет додумывать верстальщик ”

С ресурсом Product Hunt знакомы все и все знают, сколько новых проектов – новаторских и банальных, полезных и бестолковых – появляется там каждый день. Для тех, кому не всегда хватает времени сортировать этот поток, мы предлагаем небольшую подборку интересных находок из нескольких категорий (CSS, Производительность, Системы обмена сообщениями, API), которые отобрали для себя за последние несколько недель.

В настоящее время существует огромное количество веб-инструментов по оптимизации CSS файлов. Большинство из них имеют собственный алгоритм работы (есть, конечно, и дубликаты). Эффективность самих программ тоже значительно отличается. Кроме того, некоторые оптимизаторы могут «ломать» CSS код, после чего стили становятся невалидными. Как показывает практика, процент таких «полезных» инструментов достаточно высок.

Данная статья представляет собой отчет о проведенном тестировании наиболее популярных онлайн-оптимизаторов. Эксперимент проводился на 3 CSS файлах. Ссылки на каждый из них приведены в таблице результатов.

Новое 4-ое издание признанного бестселлера, охватывающего как клиентские, так и серверные аспекты веб-разработки. Эта книга поможет вам освоить динамическое веб-программирование с применением самых современных технологий. Книга изобилует ценными практическими советами, содержит исчерпывающий теоретический материал. Для закрепления материала автор рассказывает, как создать полнофункциональный сайт, работающий по принципу социальной сети.

• Изучите важнейшие аспекты языка PHP и основы объектно-ориентированного программирования.
• Познакомьтесь с базой данных MySQL.
• Управляйте cookie-файлами и сеансами, обеспечивайте высокий уровень безопасности.
• Пользуйтесь фундаментальными возможностями языка JavaScript.
• Применяйте вызовы AJAX, чтобы значительно повысить динамику вашего сайта.
• Изучите основы CSS для форматирования и оформления ваших страниц.
• Освойте продвинутые возможности HTML5: геолокацию, обработку аудио и видео, отрисовку на холсте.

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

Однако недавно я столкнулся с мыслью, которая заставила меня осознать, что CSS на самом деле имеет логику, и тот факт, что она редко рассматривается как таковая, наверное, и есть причина, почему у нас CSS получается в целом довольно слабым.

Я обнаружил, что я объясняю клиенту сложные селекторы, как будто они состоят из предмета – вещи, в которой мы фактически заинтересованы – и его условий. Например:

Эта статья не о дизайне эффективных каруселей, а об эффективном создании стиля. Другими словами, речь пойдет не о UI-дизайне, а о конструкциях CSS – смене элементов карусели, их позиционировании и размерах.

Зависимость от JavaScript с точки зрения взаимодействия, а не стиля

«Эффективная карусель» — это карусель, которая не зависит от JavaScript с точки зрения:

• отзывчивости
• содержания любого количества элементов
• отображения любого количества элементов

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

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

Замечательный фреймворк LESS позволяет сильно упростить роботу со стилями. Одной из замечательных его возможностей есть примешания (mixins). Примешания позволяют включать все свойства класса в другой класс путем простого включения имени класса как значение одного из свойств. Это напоминает использование переменных, но в отношении целых классов. Примешивания могут вести себя как функции, и принимать аргументы. Именно возможность примешаний принимать аргументы и манипулировать ими лежит в основе библеотек примешаний, таких как LESS Elements, LESS Hat, LESS Mix и компонента mixins.less в Bootstrap.

Последнее время все чаще стали попадаться сайты магазинов на Magento с длинной историей разработки и сопровождения (в несколько лет). На большинстве этих сайтов подключаемые CSS файлы завалены «ошметками» стилевой разметки для страниц, которых уже давно нет на сайте. Как правило, все это не структурировано и не откомментировано. Удаление этого мусора занимает кучу времени и в большинстве случаев на это просто «забивают». Со временем при таком подходе CSS файлы на некоторых сайтах достигают чудовищных размеров в несколько сотен килобайт.

Небольшая предыстория: 8 марта я разместил на своем блоге вот такой букет цветов. В течение недели уже несколько человек поинтересовались его реализацией — и до сегодняшнего дня отвечал достаточно кратко — с помощью border-radius, inear-gradient и transform.
Но если кому-то это было интересно, то почему бы не написать развернутый мануал?
Одним из требований было минимальное количество обьектов на один цветок — это позволит использовать любое количество цветов с незначительными изменениями кода. У меня получилось всего 5 обьектов, включая стебель и лист, но вы, если захотите, можете рисовать более сложные цветы.

Я помешан на порядке.

Вся информация должна быть разложена по полочкам — идеи, планы, подходы, методологии.

Меня пугают мысли о беспорядке — я стараюсь всё систематизировать и изложить в личные заметки, статьи или документации.

Но что делать, когда система не работает, ресурсы ограничены и специфика задачи не соответствуем идеальным понятиям? Под катом, я поделюсь своими мыслями о “Модели строгости”, касательно методологий разработки и многослойной системы организации CSS.

Однажды, у меня возникла задача, сделать на форме сайта выбор одного из нескольких цветов. Казалось бы, нет ничего проще. Элемент radiobutton, как нельзя лучше, подходит для этой задачи, нужно только чуть-чуть его кастомизировать. Тут-то и начинаются проблемы. Дело в том, что отрисовкой элементов radiobutton и checkbutton управляет не браузер, а ОС. Соответственно, большинство свойств CSS (например, background-color) на них не действует.

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