Комментарии 58
Я не знаю почему, но всякий раз, когда я встречаю «заменим JS на CSS», оказывается, что вариант CSS жрет больше ресурсов и сильнее тормозит…

В такой ситуации у меня обычно тормозят шрифты и картинки, запрос до которых почему-то в статусе stalled повисает секунд на 10-15.

К сожалению, text-overflow: ellipsis, насколько я помню, работает только на однострочном тексте. Бывает, что нужно так обрезать многострочный текст и тут приходится выкручиваться другими способами.

Например line-clamp указанный в статье…
Хотя я о нем тоже первый раз услышал )

Раньше, для оснащения страницы плавной прокруткой, требовалось задействовать несколько строк JS-кода
Раньше для этого нужно было поставить галочку в настройках браузера. Или убрать. А как быть с этим если я не хочу плавную?
2. Закрепление элементов
Всё отлично. Только закрепление ломает прокрутку и приходится юзать скрипты уже для правки этого. Попробуйте почитать хабр без скриптов. Клавиши Pgup/PgDn работают со всем окном и без скриптов получается систематический перелёт, т.к. панелька сверху отжирает часть окна.
А как быть с этим если я не хочу плавную?

Я проверил, слава Богам, на Firefox никакой плавной прокрутки.
Я к тому, что отключив плавную прокрутку в браузере, у меня прокручивает нормально (резко) во всех примерах. То есть поведение абсолютно корректное, поддерживаю использование этого свойства вместо костылей на JS, которые не учитывают мои настройки и делают кисельную прокрутку.
Но ведь и у меня smooth scrolling в настройках выключен, но прокручивает плавно с этим свойством.
А, теперь понял. Я думал оно на прокрутку мышью тоже будет работать. А оно работает на клики по буквам. Ну да ладно, не сильно страшно.
Попробуйте почитать хабр без скриптов. Клавиши Pgup/PgDn работают со всем окном и без скриптов получается систематический перелёт, т.к. панелька сверху отжирает часть окна.

Не смог воспроизвести ни в Chrome, ни в Firefox

Waterfox. В обычной фоксе тоже работало так. Скрипты точно отключены? Со скриптами работает нормально
После того, как в CSS появилась директива supports, проверять возможности браузеров стало можно прямо из CSS-кода.

Правильно ли я понимаю, что новая директива проверки накладываемых ограничений для старых браузеров поддерживается только на современных? Было бы уместно указать поддержку в данном случае как это работает. Логично было бы, если свойство только устанавливало выполнение включенного блока, а на устаревших браузерах он пропускался, но
Она поддерживает различные комбинации выражений, построенные с помощью условных операторов AND, OR и NOT

из этого можно вывести, что свойство выявляет различия только в современных браузерах между собой, в тех, где оно поддерживается. Это так?
Safari эту директиву не понимает. Итого пишем прогрессивный css с даунгрейдом по умолчанию, что сводит любые телодвижения к нулю ибо профитней чисто даунгрейженый css оставить (с навеской js по желанию) и не заморачиваться.
Я когда-то именно supports для position: sticky использовал (ну и так по мелочи), а потом нарвался на геморрой в поведении Safari, после чего решил ну его в пень.
Зачем вставлять «скриншот» codepen, а ниже ссылку? ruvds со своими переводами всего и вся, мне кажется, начали сходит с ума
спасибо было интересно, возможно когда нибудь в далеком будущем, можно будет все делать на одном css, без жаба-скрипта, это будет афигенски
Ссылка на caniuse говорит, что edge поддерживаект прокрутку с января этого года.
Существование альтернативного движка, как по мне, с точки зрения разработчика. Теперь остался только один конкурент, да и тот меньше 10%.
Где есть ещё сафари, который тот же вебкит, просто устаревший? Ну такое себе.
Ну Blink в 2013 в сторонку отошел, так что WebKit не устаревший, а параллельно развивающийся.
Эт раз.
Второе, море народа сидит на браузерах которые сжимают трафик (аналоги OperaMini) и ещё куча шлака всякого. Пока ты сайтом не продаёшь тебе то и насрать, а как узнаешь процентаж трафика со странных устройств и процентаж отказов, так сразу и айайай.
Ну Blink в 2013 в сторонку отошел, так что WebKit не устаревший, а параллельно развивающийся.

При этом со стороны разработчиков вечный вой о том, что в сафари чего-то не хватает и что-то ломается.
Второе, море народа сидит на браузерах которые сжимают трафик (аналоги OperaMini)

В основном внутри всё тот же хром, а жмутся картинки и видео. Время настоящей OperaMini, которая полностью переписывала HTML, уже прошло.
и процентаж отказов

Благо у меня всё это заблокировано ))
Да, всё это конечно круто, но я уже год локти кусаю по поводу проксей из JavaScript и проблем с customElements с IE11. А тут такая же ситуация, supports, grid-Ы, прокрутка через CSS, это всё не сегодня. Через пару лет надеюсь, в лучшем случае. Пока IE11 всё ещё жив, обычный работяга всё ещё в пролете мимо новшеств мира сайтостроения))
неясно зачем они к такой нужной фишки как ограничение колво строк текста засунули какой то display -webkit-box

Пару раз пробовал использовать плавную прокрутку на css и всеравно возвращался к js. А все потому, что если header на позиции fixed, то элемент к которому скролим — частично прячется под этим header и еще были какие-то нестыковки, но уже не помню какие.

Поэтому не нужно прикреплять шапку. Пожалейте пользователей, у них и так вертикального пространства не хватает.
И это я создателям Хабра.

Так не от меня же зависит, прикреплять шапку или нет, желание заказчика

Ну так это вы специалист, и вполне можете объяснить заказчику минусы такого решения. А то закажут сайт с градиентным сине-бирюзово-красным фоном в тонкую полосочку и жёлтыми буквами, вы тоже делать будете, да ещё и оптимизировать через градиенты постараетесь, или всё же объясните, что это дичь и от этого вытекают глаза?

Ну и при чем тут дизайн градиента к реализации скролла? Если дизайн заказчику нравится, то мне абсолютно всеравно какие там вырвиглазные цвета или кривые отступы у похожих блоков, тут в теме было, что реализация некоторой логики на css — лучше чем на js. Но в итоге из-за разного рода багов, всеравно лучше использовать js. А по поводу дизайнов, так о них не спорят, посмотрите, что студия Лебедева толкала за бешеные бабки. Что для нас не очень, то кому-то всеравно понравится

Я делаю элемент нулевой высоты, смещённый вверх на высоту шапки, и скролю к нему.
Ну а как же пользователю давать доступ к меню? Свайп сбоку делать? Придётся делать обучалку для сайта, потому что это не очевидно. А у некоторых браузеров это вообще системное поведеление для «назад».
У Хабра есть прокрутка наверх, хорошая, запоминает место. Есть сайты, которые показывают шапку при прокрутке назад, тоже не ломает естественное поведение.
Свайп сбоку делать?

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

Так там тем более места на экране нет, зачем его красть в пользу шапки?
А как быть с навигацией? Её можно спрятать за экран, как я выше писал, но как научить пользователя? Тем более, что многие места за экраном уже заняты.
но как научить пользователя?

Сам увидит, когда прокрутит. И да, шапка вполне себе может быть в шапке.
Ну так не нужно это делать. Шапка, появляющаяся при обратной прокрутке, с гамбургером, открывающим меню с левой или правой части экрана. Почему бы и нет.
Противопоставление этих двух технологий — что-то новое в разработке. Но лучше использовать CSS там, где нужен CSS. И javascript там, где он нужен.

Это все очень весело, но я бы выделил две явных проблемы:
1) трудноуловимый источник странных проблем. Хорошо, если разработчик — я, и я примерно в теме того, где я понавертел всяких модных CSS-штук, а если нет — тушите свет! То, что раньше надо было выкапывать в 3-4 подключённых JS файлах, теперь надо будет искать ещё и в груде CSS, и дай бог, чтоб это не было "костылем", и не оказалось реализоваео в виде стиля прописанного прямо к элементу, прямо где-нибудь в PHP-коде!


З.Ы. Только не говорите про отладчик… На всяких айфонах — это отдельные боль и страдания.


2) Удвоение работы по разработке таким способом: сначала делаем для современных браузеров, а потом берём IE9 и проделываем все заново! Блеск!

а потом берём IE9

И выкидываем его в окно.
Ну или разработка за двойной ценник, почему бы и не переделать.

Нельзя в окно! Это засорение окружающей среды токсичными отходами!


А если серьёзно — то все было бы очень круто, если бы в целевой аудитории многих компаний не сидели государственники с win XP и дефолтным браузером IE9, а за пультом этих шайтан-машин не сидели бабульки, которые при виде поехавшей вёрстки (или не дай боже ошибки какой) неистово крестятся и жмут на крестик.

win XP и дефолтным браузером IE9

Эм, вы точно разработчик? XP дефолтно идёт с IE6, и абгрейдится до IE8. Девятой версии там никогда не было.

посыпал голову пеплом
Блин, точно! В хрюшке ж IE8…
Ну обосрался, ну бывает… IE8 судя по метрикам всё-таки почти вымер, а вот IE9 вижу стабильно.

Не ясно как работает темная тема(для меня).
Она зависит от того какая тема стоит в браузере? да?
Я пока не тестировал эту штуку, и мне интересно, оно способно узнать, что я в XFCE выбрал тему с тёмными элементами? Или оно только для винды и макоси?
Зависит от того, что там наворотили в XFCE. Linux дело такое, везде всё разное.
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.
Информация
Дата основания

27 июля 2015 г.

Местоположение

Россия

Сайт

ruvds.com

Численность

11–30 человек

Дата регистрации

18 марта 2016