Рубрика «postcss»

в 22:43, , рубрики: css, plugin, postcss, scss

Первая теория: плагин работает некорректно

Что мы проверили:

  • Плагин не оборачивает правила? Нет, всё ок. После сборки hover был в медиазапросах.

  • Не работает hover: hover? Проверили в эмуляции мобильных устройств — работает.

Значит, проблема не в плагине.

Вторая теория: баг на отдельных устройствах

Мы начали тестировать разные модели через Browserstack. На большинстве устройств всё нормально, но есть одно но.

Samsung Galaxy игнорирует всё.

Ему всё равно, что мы оборачиваем hover в @media (hover: hover). Он отвечает: «Да-да, я поддерживаю hover», а потом предательски залипает.

Читать полностью »

в 10:15, , рубрики: css, css3, media queries, postcss, адаптивная вёрстка, верстка, диапазоны css, медиазапросы

Media Queries Level 4: эволюция синтаксиса, которую сложно игнорировать — и сложно внедрить без оглядки.

Адаптивная вёрстка — основа современного фронтенда. Долгое время в CSS было всего два способа задать условия ширины: min-width и max-width. Они отлично справлялись со своей задачей, но имели свои особенности.

С выходом спецификации Media Queries Level 4 в CSS появился новый, более интуитивный синтаксис для написания диапазонов, приближённый к привычной математике:

@media (width < 900px) { ... }
@media (600px <= width <= 900px) { ... }

Читать полностью »

в 10:36, , рубрики: css, postcss, Разработка веб-сайтов

10 PostCSS плагинов, которые сэкономят время вашему верстальщику - 1

У нас, у фронтендеров, есть такая категория инструментов, которые никак не решают стоящие перед нами задачи, а скорее влияют на сам процесс их решения. Изменяют его. Отношение к таким инструментам самое разное – начиная от мании в духе “давайте эту штуку пихать везде, это же так круто” и заканчивая отговорками вроде “раз не решает задачи бизнеса, значит оно нам не нужно”. Но, так или иначе, сегодня мы поговорим про PostCSS — один из таких инструментов.

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

Читать полностью »

в 13:12, , рубрики: css, html, javascript, margin, padding, postcss, text-metrics, typography

Организация отступов при верстке и композиции элементов на странице требует определенной сноровки, чтобы обеспечить правильные комбинации и желаемый результат.
А если в дизайн-макете запрашиваемые отступы указаны без учета высоты линии и пустых областей отрисовки шрифтов (заплечики, диакритики, нисходящая высота)? Как сделать верстку максимально приближенной к макету эффективно и без долгих ручных пересчетов?
Интерлиньяж и вертикальный ритм позволяют унифицировать расстояния между элементами, но не решают вопрос компенсации расстояний с учетом текстовых метрик используемых шрифтов.
При разработке приложений для клиентов класса люкс особое внимание уделяется точности имплементации интерфейса, где каждый пиксель на счету.
В данной статье мы рассмотрим подход, призванный оптимизировать рутинную работу вокруг отступов — автоматизированная корректировка отступов с учётом высоты линии целевых элементов и текстовых метрик используемых шрифтов на этапе пре- или пост-компиляции стилей.
Читать полностью »

в 10:15, , рубрики: bem, css, css modules, javascript, postcss, React, ReactJS, перевод
Публикация — свободный перевод статьи «Practical Guide to React and CSS Modules». Автор статьи Tatu Tamminen

В прошлом веб-разработчики тратили много времени и сил на создание повторно используемых компонентов. Оcобую проблему представлял собой CSS и природа его каскадов. Например, если разработчик создаёт компонент для отображения древовидной структуры, то как он может гарантировать, что CSS класс (например, .leaf), используемый в этом компоненте, не приведёт к побочным эффектам в других частях приложения? Были созданы различные методологии и соглашения, чтобы справиться с проблемами селекторов. БЭМ и SMACSS — широко используемые методологии, которые хорошо выполняют свои задачи, но в то же время далеко не идеальны. В этой статье рассказывается о недостатках таких методологий, основанных на соглашении об именах, о том, что представляют собой CSS Modules, и о том, как эти модули можно использовать в React приложении.
Читать полностью »

в 13:25, , рубрики: api, css, github, graphql, GraphViz, open source, postcss, визуализация графов, визуализация данных, документация API

Как мы собрали 1500 звезд на Гитхабе, соединив проверенную временем технологию и новый интерфейс - 1

Недавно мы выпустили инструмент с открытым исходным кодом GraphQL Voyager. Удивительно, но он попал на первую страницу новостей Hacker News и GitHub, и в первые несколько дней получил 1000+ звезд. Сейчас у него уже более 1600 звезд.*

Людям понравился гладкий интерфейс, интерактивные функции и анимация. Мы использовали TypeScript, React, Redux, webpack и даже PostCSS, но это НЕ еще одна статья об этом. Давайте заглянем под капот...

Читать полностью »

в 18:49, , рубрики: css, html, javascript, postcss, postcss hamster, Разработка веб-сайтов
PostCSS Hamster

Современная веб разработка не стоит на месте, и с каждым днем сложность проектов только растет. Постоянно выходят новые инструменты, которые позволяют облегчить и автоматизировать работу разработчику, чтобы он мог идти в ногу со временем и отвечать современным требованиям, ритмам разработки. Сначала нам на помощь пришли препроцессоры less, sass, и т.д. Потом появились системы сборки проектов gulp, grunt, webpack и т.д. Вышли фрейморки, самый известный из них наверное sass compass.
Читать полностью »

в 14:39, , рубрики: css, holyjs, javascript, postcss, андрей оконечников, Блог компании JUG.ru Group

Модульный CSS: — Инструментарий, который мы имеем сейчас в арсенале — это просто сказка - 1

Инструментарий, который мы имеем сейчас в арсенале — это просто сказка!

Модульный CSS: — Инструментарий, который мы имеем сейчас в арсенале — это просто сказка - 2Андрей Оконечников, разработчик с 15-летним стажем, из которых пользовательским интерфейсам было отдано более десяти, Андрей расскажет на HolyJS об использовании PostCSS и Webpack для решения проблем фронтенд-разработки. Доклад Андрея называется «Модульный CSS» и посвящен тому, как при помощи JavaScript и AST работать с CSS на масштабных проектах. Отталкиваясь от тематики доклада, мы задали Андрею несколько вопросов, которые позволят вам понять глубину связи UI/UX с работой frontend-разработчика, а также о проблемах и будущем CSS на больших проектах.
Читать полностью »

в 5:10, , рубрики: $mol, angular.js, asynchronous, becycle, bem, benchmarks, build system, compositing, crossplatform, css, dependency, error proof, exception handling, FRP, inheritance, javascript, lazy execution, lazy initialization, lazy load, life cycle, localization, logging, mam, modules, namespaces, node.js, oorp, parallelism, polymer.js, postcss, proxy, react.js, reactive programming, reverse engineering, sourcemap, synchronization, TypeScript, vanilla.js, view.tree, Разработка веб-сайтов, разработка мобильных приложений

Сколько нужно времени, чтобы просто вывести на экран большой список, используя современные фреймворки?

Список на 2000 строк ReactJS AngularJS Raw HTML SAPUI5 $mol
Появление списка 170 ms 420 ms 260 ms 1200 ms 50 ms
Обновление всех его данных 75 ms 75 ms 260 ms 1200 ms 10 ms

Напишем нехитрое приложение — личный список задач. Какие у него будут характеристики?

ToDoMVC ReactJS AngularJS PolymerJS VanillaJS $mol
Размер ( html + js + css + templates ) * gzip 322 KB 326 KB 56 KB 20 KB 23 KB
Время загрузки 1.4 s 1.5 s 1.0 s 1.7 s 0.7 s
Время создания и удаления 100 задач 1.3 s 1.7 s 1.4 s 1.6 s 0.5s

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

Синхронная параллельная загрузка ресурсов

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

Читать полностью »

в 13:06, , рубрики: css, html, postcss, андрей ситник, Блог компании Конференции Олега Бунина (Онтико), Клиентская оптимизация, Разработка веб-сайтов, метки: ,

Андрей Ситник ( Iskin, Злые марсиане)

Андрей Ситник

В 2013 году Holowaychuk анонсировал свой проект Rework в статье «Модульный CSS-препроцессинг с Реворком» (http://tjholowaychuk.tumblr.com/post/44267035203/modular-css-preprocessing-with-rework ).

Как раз тогда я искал какой-то инструмент для того, чтобы сделать автопрефиксер. Когда я прочитал эту статью, я был поражен, потому что это был действительно революционный подход, он менял все. И поэтому первые версии автопрефиксера базировались на Rework’е. Но, к сожалению, Rework – это был Proof Of Concept, это было первое поколение, чтобы доказать, что это вообще работает. Поэтому мы его жестко форкнули, переманили всех разработчиков, устроили маленькую революцию и сделали PostCSS.

PostCSS – это второе поколение модульного процессора.
Читать полностью »

12
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js