Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 64
color #a50c5b - 50sat /* decrease saturation by 50% */ background-color #a50c5b + 50lt /* make color lighter by 50 percent */Вот это ад.
да, согласен, чем не устроил синтаксис less: lighten(#a50c5b, 10%)?
Ну вот вы захотите одновременно добавить яркости и подмешать красного цвета и у вас получится конструкция make_redder(lighten(#aaa, 10%), 10%). А так: #aaa + 10lt + 40r. По мне, такие выражения дают больше возможностей. Но, впрочем, для простых операций можно и функции сделать.
Ваш синтаксис нарушает правило перестановки слагаемых, поэтому функции предпочтительнее.
А зачем тут коммутативность?
При том можно даже сделать синтаксис следующего вида: «rgb(10, 10, 10) + rgb(10, 10, 19) + red(10) — hue(20) — 20light» и будет тогда та самая коммутативность, не мозолящая глаз. А вообще, я считаю, что это можно рассматривать как неявное преобразование типов в арифметических выражениях в C++. Вы же не задумываетесь, что будет если написать следующее в Си: auto result = 3.5 + 2 + 3 — 2. Хотя на самом деле то компилятор в таком выражении учитывает приоритет двух операндов и приводит один из них к типу с высшем приоритетом. Так и здесь то же самое.
3.5 + 2 + 3 == 3 + 2 + 3.5Но:
#000 + 10r + 10lt != #000 + 10lt + 10rЭто ещё можно было бы сделать через символ умножения, если бы вы делали корректную операцию изменения яркости, а не линейную, но в текущем состоянии это очень и очень плохое решение.
А ещё у вас
hsla(45, 60%, 20%, 1) + 10lt не работает. И rgb(1,1,1) + rgb(1,1,1) тоже.#000 + 10r + 10lt != #000 + 10lt + 10r
А что же вы хотели получить? Одинаковый цвет? Вы суммируете каналы из разных форматов цвета, поэтому и получаете разные результаты. Попробуйте сделать эти же операции в той же последовательности на hslpicker.com и вы получите ровно то же самое.
Зато сравните результаты со следующими выражениями: #000 + 10r + 10g и #000 + 10g + 10r. Они будут одинаковыми.
Я так понимаю вам смущает знак "+"?
rgb(1,1,1) + rgb(1,1,1)
Такое и не будет работать, так как я реализовывал только суммирование цвета и какого-либо одного канала.
hsla(45, 60%, 20%, 1) + 10lt
Это глюки библиотеки MrColor, которые я пока что не успел преодолеть.
Название на слух какое-то двусмысленное :) Это было так задумано?
Вы же знаете о существовании Rework, Gonzales и PostCSS? Просто на всякий случай. Даже при написании велосипеда стоит оценивать конкурентов или просто аналогичные существующие решения.
Следующий вопрос по префиксам. Эти примеры говорят о том, что всё плохо:
Несуществующее свойство
Следующий вопрос по префиксам. Эти примеры говорят о том, что всё плохо:
@mixin filter-grayscale(percent)
-webkit-filter: grayscale($percent);
-ms-filter: grayscale($percent);
-o-filter: grayscale($percent);
filter: grayscale($percent);
@mixin border-radius(topleft, topright)
-webkit-border-radius $topleft $topright 4px 5px
border-radius $arguments
html {
-ms-width: 50px !important;
-moz-width: 50px !important;
width: 50px !important;
}Несуществующее свойство
-o-filter, -webkit-border-radius в 2015 году, -ms-width? Писать префиксы руками сегодня — это очень странное решение. Но то, что вы их выносите в абстракцию, ничего, по сути, не меняет — они всё равно написаны руками. Префиксы нужно добавлять только а) существующие и б) на основе статистики — и это давно уже делает Автопрефиксер. То есть префиксы вообще не нужно писать, нужно только пропускать через него CSS-файл на выходе — он сам знает что нужно, что актуально и как правильно на основе базы Can I use. И конкурировать с этим, даже в рамках велосипеда, я бы не стал.Собственно говоря, во встроенной версии примеси filter-grayscale нет свойства -o-filter. И делал я его как раз на основе базы caniuse. Вы можете проверить это, удалив определение mixin'а из исходного кода. -ms-width был тоже придуман примера ради. А хотя, кто его знает — может быть IE поймет :)
Автоматическое проставление префиксов не всегда спасает. Иногда нужно написать заплатку под конкретный браузер. Для того примеси и нужны. Например, Firefox начал поддерживать фильтры только с 35 версии. И чтобы сделать изображение черно-белым в нем, нужно включать svg-картинку.
Автоматическое проставление префиксов не всегда спасает. Иногда нужно написать заплатку под конкретный браузер. Для того примеси и нужны. Например, Firefox начал поддерживать фильтры только с 35 версии. И чтобы сделать изображение черно-белым в нем, нужно включать svg-картинку.
> Автоматическое проставление префиксов не всегда спасает. Иногда нужно написать заплатку под конкретный браузер
Автопрефиксер в настройках позволяет перечислить нужные браузеры, хоть самые устаревшие
Автопрефиксер в настройках позволяет перечислить нужные браузеры, хоть самые устаревшие
Автопрефиксер не добавит вам фоллбэки. Поэтому примеси предпочтительней.
а что вы скажите на счет postcss? мне как-то этот подход нравится больше, когда мы просто прописываем пару строчек на JS, который пройдется по всем стилям и, согласно каким-то вашим правилам, добавит кастылей. В итоге у нас чистый код, примиси используются только там где это требуется, и пользователи старых браузеров довольны.
Хотя конечно все это дело вкуса. Но некоторые фэлбэки крайне не удобно делать через миксины, код стилей усложняется и поддерживать подобное бывает тяжко. Потому мне лично нравится именно тот подход, который я описал.
Хотя конечно все это дело вкуса. Но некоторые фэлбэки крайне не удобно делать через миксины, код стилей усложняется и поддерживать подобное бывает тяжко. Потому мне лично нравится именно тот подход, который я описал.
Да. Автоматическое проставление браузерных префиксов — вещь удобная. Здесь спору нет. Я хочу это хорошенько обдумать и добавить в мой препроцессор. Но нужно хорошо провести грань между примесями и автопрефиксизацией — когда необходимо использовать одно, а когда другое.
Я даже, честно говоря, не думаю, что нужно усложнять эту функцию правилами типа "> 0.2%" и т.п. Я склоняюсь к тому мнению, что в стилях для сайта нужно учитывать как можно больше браузеров и нужно делать стили совместимыми с большинством из них. Пусть это будет 0.1% посетителей вашего сайта — зато этот 0.1% не закроет вашу страницу после того как увидит что-то несуразное.
Я даже, честно говоря, не думаю, что нужно усложнять эту функцию правилами типа "> 0.2%" и т.п. Я склоняюсь к тому мнению, что в стилях для сайта нужно учитывать как можно больше браузеров и нужно делать стили совместимыми с большинством из них. Пусть это будет 0.1% посетителей вашего сайта — зато этот 0.1% не закроет вашу страницу после того как увидит что-то несуразное.
Мне нравится в postcss как раз таки противоположное — по умолчанию оно ничего не делает. А далее вы просто добавляете плагины, правила и т.д. и можно сделать хоть свой sass/less. А можно взять простенький препроцессор с поддержкой миксинов (я не отрицаю что они нужны, но я из обычно применяю не для хаков/префиксов, а для минимизации какой-то рутины. Спратять какой-нибудь страх и ужас. Ну и комбинировать поведение.
Лучше подумайте над тем, как добавить возможность расширять синтаксис вашего препроцессора без необходимость ковыряться в тоннах кода. Скажем node-visitor-ы свои добавлять и т.д.
Лучше подумайте над тем, как добавить возможность расширять синтаксис вашего препроцессора без необходимость ковыряться в тоннах кода. Скажем node-visitor-ы свои добавлять и т.д.
Ну так Stylus так и работает: вы пишете «чистый код», который примесями разворачивается в лапшу — где-то просто префиксы добавляются, где-то транслируется в разные нотации, а где-то вообще разные правила вставляются. При этом вы не скованы синтаксисом CSS, а можете использовать всякие клёвые штуки типа вложенных правил, вложенных media-queries и прочего.
Для фоллбэков есть другие плагины для PostCSS, например, CSS Grace: github.com/cssdream/cssgrace
Проблема фолбэков в их неуниверсальности. В разных проектах нужны разные виды фолбэков и многие из них специфичны для конкретных проектов. Например, на одном из проектов мне надо было реализовать прозрачность. Но для браузеров её не поддерживающих (старые версии ие) нельзя было применять фильтры, а необходимо было использовать упрощённый дизайн без прозрачности, что было не так красиво (фоновая картинка, если она была установлена, не просвечивала), зато не тормозило.
Меня всегда удивляли эти «примера ради», люди ведь копируют код не глядя, забывая читать описания. И потом вы видим
<div class="button"> и прочие безумства. Так что осторожнее. А что касается Автопрефиксера, он позволяет гибко указывать любые целевые версии браузеров и, если нужно, форсить прямо в коде нужные заплатки и префиксы, почитайте об этом в документации.
Дак это вроде же пример, нет?
Понятно, что в примеси потом выносится лишь то, что решит фронтендщик потом, зачем придираться.
Понятно, что в примеси потом выносится лишь то, что решит фронтендщик потом, зачем придираться.
hostinger не выдержал напора :)
Я даже и не думал, что я в ближайшее время вылезу за пределы их ограничений. Придется, что-нибудь с этим сделать… Только пока что непонятно что…
У гитхаба есть возможность хостить статические сайты.
Да, но, к сожалению, у меня сайт не статический и поэтому пришлось искать что-то более подходящее.
Ясно. Обычно у таких вещей сайты статические. Возможно имеет смысл подумать об отказе от динамики в пользу статики. А пока взять какую нибудь не дорогую VDS.
Я делал сайт для демонстрации возможностей библиотеки, а это не сделаешь со статическим контентом. На моем текущем сайте можно протестировать библиотеку, а также увидеть «арифметику цветов» в боевом действии.
У вас вместо сайта главная страница хостера открывается.
Ну, конечно же, мне пришлось написать небольшой сайтик для презентации своего продукта (вы уже догадались, какой язык программирования был выбран мной для этой цели?).
Превышен Лимит Процессорной Памяти
Отличный выбор :)
Доступ к сайту будет полностью восстановлен после обновления всей цепочки DNS. Сейчас сайт доступен по адресу: http://dobby007_h5a5nu.radius-host.net
Но… Но… Но… зачем??
Я, конечно, прощу прощения, но… ЧТО именно не нашлось интересного, что сподвигло писать свой компилятор?
После двухдневного (а может и меньшего) просмотра результатов с гугла, я ничего интересного для себя не нашел.
Я, конечно, прощу прощения, но… ЧТО именно не нашлось интересного, что сподвигло писать свой компилятор?
Во-первых, мне было интересно написать компилятор самому. Во-вторых, мне позарез как нужно было что-то, что позволило бы мне пройтись по файлику стилей и изменить семейство шрифтов на Arial для селектора body и цвет шрифта на #333. И желательно было бы не плодить технологии, а сделать все на родном PHP.
border-radius с префиксами в примере — полный ужас :).Ну и какой смысл сейчас делать препроцессоры, когда уже во всю развиваются постпроцессоры ;).
А что на счет иерархичности?
Вы имеете в виду древовидную структуру селекторов? Тогда, да. В MySheet есть данная возможность. В статье есть пример с этой функцией. Для наглядности приведу еще один:
компилируется в следующий CSS-код:
html
height 100%
body
color #777
height 100%
font-family: 'Open Sans', sans-serif;
.wrapper
position relative
min-height 100%
#header
color #fff
background-color rgba(0, 0, 0, 60%)
#logo
float left
.title
padding 4px 5px
font-weight bold
font-size 14pt
#main-menu
overflow hidden
ul
float right
li
float left
padding 8px 6px
компилируется в следующий CSS-код:
html {
height: 100%
}
html body {
color: #777777;
height: 100%;
font-family: "Open Sans",sans-serif
}
html body .wrapper {
position: relative;
min-height: 100%
}
html body .wrapper #header {
color: #ffffff;
background-color: rgba(0, 0, 0, 0.6)
}
html body .wrapper #header #logo {
float: left
}
html body .wrapper #header #logo .title {
padding: 4px 5px;
font-weight: bold;
font-size: 14pt
}
html body .wrapper #header #main-menu {
overflow: hidden
}
html body .wrapper #header #main-menu ul {
float: right
}
html body .wrapper #header #main-menu ul li {
float: left;
padding: 8px 6px
}
html body .wrapper #header #main-menu ul li
я надеюсь что это только для примера и в реальной верстке подобного не будет.
Вы знаете?.. Я так всегда пишу :) И этот код сейчас с моего сайта. И это работает!
почитайте про БЭМ, про smacss и т.д… В конце концов разберитесь как браузер селекторы применяет (для каждого элемента справа на лево, так что указывая html в селекторах вы буквально заставляете браузер для каждого элемента все траверсить вверх по DOM. При том что у вас где-то по середине айдишник который уже должен быть только один на странице, и дальше писать вложенности смысла нет.
А что вам не понравилось?
попробуйте погуглить CSS performance optimisations. Узнаете много интересного.
Да дело даже не столько в производительности, сколько в излишней специфичности селекторов. Это как минимум не разумно и я не представляю как такую верстку поддерживать.
На уровне исходных стилей поддерживать легко. Переносишь блок стилей на уровень корневого элемента и получаешь совсем другие конечные селекторы. А на уровне HTML поддерживать точно также как и все остальное. Эти вещи поддерживать мало влияют друг друга в случае использования препроцессоров, поддерживающих древовидную структуру.
получаешь совсем другие конечные селекторы.
проблемы со специфичностью селекторов это не решает.
Что вы скажите о БЭМ как о другой крайности?
Вы ошибаетесь. Это напрямую влияет на специфичность селекторов.
О БЭМ я думаю как о решении, разработанном конкретной компанией под их задачи, с которыми мне еще не приходилось сталкиваться. Это нестандартный взгляд на вещи со своими плюсами и минусами.
О БЭМ я думаю как о решении, разработанном конкретной компанией под их задачи, с которыми мне еще не приходилось сталкиваться. Это нестандартный взгляд на вещи со своими плюсами и минусами.
Это напрямую влияет на специфичность селекторов.
Специфичность селекторов и есть проблемы в долгосрочной перспективе.
Это нестандартный взгляд на вещи со своими плюсами и минусами.
Рекомендую к просмотру доклад Вадима Макеева о различных методологиях верстки и про БЭМ в частности. Может будет интересно.
мне стало плохо, когда я увидел два айдишника подряд. с еще тремя селекторами перед ними.
Про производительность я как-то даже не думал. Спасибо.
Да, именно это я и имел ввиду. Спасибо за пояснение. Как-то пропустил этот участок в статье.
А есть ли поддержка «ссылок» на «текущий селектор» в дереве, как в less? Например:
А есть ли поддержка «ссылок» на «текущий селектор» в дереве, как в less? Например:
body {
a {
color: red;
&:visited {
color: blue;
}
.some-parent & {
font-weight: bold;
}
}
}
Да. Только не на текущий, а на родительский селектор. Вот только ваш код моя библиотека не переваривает из-за неравномерно расставленных пробелов в строке. Будем разбираться. Попробуйте пока этот:
body {
a {
color: red;
&:visited {
color: blue;
}
.some-parent & {
font-weight: bold;
}
}
}
На mss.flydigo.com есть блок Try it now внизу страницы. Попробовать ввести свой код можете там.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Рассказ о том, как написать свой собственный CSS препроцессор за 9 месяцев