Ответы пользователя по тегу Вёрстка
  • Что более актуально использовать :Grid или flex?

    dpr
    @dpr
    frontend developer
    Смотрим ссылки
    https://caniuse.com/#feat=flexbox
    https://caniuse.com/#feat=css-grid

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

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

    dpr
    @dpr
    frontend developer
    Сделайте гридами. Поддержка хорошая, в большинстве устройств все будет нормально. Для отсталых сделайте на флексах попроще, пусть не по макету, но доступно для использования. Если нужно совсем мамонты, фолбечьте дальше на инлайн блоках.
    Ответ написан
  • Как научится давать сроки по проекту?

    dpr
    @dpr
    frontend developer
    Согласен с Евгений — умение придет с опытом. Чем больше верстаешь, чем больше понимаешь, сколько тебе нужно времени на верстку определенных вещей. Суммируешь, накидываешь процентов 20 и вот оно время, за которое сможешь сверстать страницу.

    В начале пути я рекомендую воспользоваться тайм-трекером. С ним вы сможете более объективно фиксировать потраченное время. Если аккуратно вести трекинг проектов, то вы сможете вернуться и посмотреть, за сколько вы реально делали похожий проект.
    Ответ написан
  • Как указать фиксировано-адаптивную высоту блока?

    dpr
    @dpr
    frontend developer
    Метод, предложенный SmthTo, хорош, когда все слайды одинаковые.
    Если слайды с разным кол-вом высоты и автоподстройкой высоты при смене слайда, он не подойдёт.

    Добавлю еще один, который использую я.

    Он примитивен: просто прописываем высоту обертке для не инициализированного слайдера:

    .myslider:not(.owl-loaded) {
      height: 300px;
      overflow-y: scroll;
    }


    Разщумеется, таким образом не получиться точно указать нужную высоту (или придется сильно заморочиться), но этого в общем-то и не нужно. Когда высота меняется всего на несколько пикселей после инициализации, это практически не заметно.
    Ответ написан
  • Стоит ли использовать препроцессор отличный от SCSS?

    dpr
    @dpr
    frontend developer
    О, мой любимый холиварчик! =))

    Начнем с indent vs brackets. Код с отступами лаконичен, по-своему красив, но обладает фатальным недостатком — его нельзя просто так взять и скопипастить из одного места в другое. Отступы обязательно нарушатся, IDE не поймёт и всё развалится. Нужно вручную поправлять, чтобы все встало на свои места. Также в процессе рефакторинга нарушаются отступы и появляется геморр. Второй серьёзный недостаток — это несовместимость с native css. Нельзя взять кусок css кода из интернетов и вставить в свой файл, его нужно вручную (или онлайн конвертером) переформатировать под нужный синтаксис. Всё это лишние телодвижения, лишние сложности, трата времени. Поэтому только скобки. Благо скобочный синтаксис поддерживается во всех трех препроцессорах.

    В пункте 3 вы ерунду написали. Никто в серьезном проекте не будет подключать браузерный компилятор стилей. Даже при использовании less стили все равно обрабатываются заранее и на продакшн выкладывается готовый css файл.
    Так что это преимущество less не стоит брать во внимание от слова "вообще".

    [Написанное в следующем абзаце, исключительно моё мнение, а не общепризнанные факты]
    Почему же sass выигрывает? Во-первых, это достаточно мощный препроцессор, с огромным количеством возможностей. Во-вторых, и я думаю, это главное, он единственный, компилятор которого написан на "С" -> скорость работы. Другие два написаны на javascript. И в-третьих, исторически так сложилось. Стайлус крутой препроцессор, но он появился много позже остальных и возможно, еще не успел набрать популярность.

    В свою очередь у scss есть свои серьёзные недостатки.
    Первый — невозможно в scss/sass файл импортировать обычный css, он не будет включен файл, а будет заменен css-импортом. В других препроцессорах имеются специальные синтаксические конструкции для этого.
    Второй — отсутствие резолвинга путей, что другими так же предоставляется "из коробки". Приходится извращаться с прописыванием путей к картинкам. Проблема нивелируется при использовании вэбпака, но ведь не всегда он используется.

    Что касается меня, то я готов мирится с этими двумя недостатками sass. Остальные возможности их с лихвой перекрывают.
    На чем вам остановиться,я советовать не буду. Я свободно работаю со всеми тремя инструментами, но новые проекты всегда начинаю с использованием scss.
    Ответ написан
  • Как сделать background в виде такой полосы?

    dpr
    @dpr
    frontend developer
    самое простое - линейный градиент на общий блок
    Ответ написан
  • Изображения вставлены через атрибут тега style="background-image: url()". Почему?

    dpr
    @dpr
    frontend developer
    Вы не усмотрели самого главного:
    5c1a74d4749cd428813580.png

    Чтобы оценить, смотрим уровень браузерной поддержки здесь https://caniuse.com/#feat=object-fit
    и здесь https://caniuse.com/#feat=background-img-opts

    И понимаем, что надежнее вставить картинку фоном, нежели использовать object-fit на теге img
    Ответ написан
  • Как с CSS скрыть все элементы порядковый номер которых больше 4-х?

    dpr
    @dpr
    frontend developer
    https://jsfiddle.net/3ryg76hb/1/

    nth-of-type использовать на элементах списка немного бессмысленно =) Кроме элементов li список не может содержать ничего другого. Достаточно nth-child.
    Ответ написан
  • Как Вы относитесь к SMACSS?

    dpr
    @dpr
    frontend developer
    Css классы вообще не несут никакой семантики. Хоть как обзывайте, всем пофиг. Если вы говорите о "понятности" для программиста/верстальщика, то тут вы правы — мнения разные.
    Что такое .title? Заголовок. Какой заголовок? А хз...
    А что такое .product-item__title? Это заголовок блока в списке товаров. Very good.

    Окей. Но мы же видим в разметке class="title _product-item". А в css мы это видим? Нет. У нас голый класс .title {}, и еще где-то составной есть .title._product-item. Очевидно, что .title используется с другими блоками тоже. Пришел новый человек с задачей поменять поменять цвет тайтлов ну допустим в отзывах. Он откроет страницу, посмотрит в инспектор, увидит что цвет заголовка задан в классе .title, а про .title._product-item он даже не в курсе будет, это на другой странице сайта, в css через 1000 строк. Он просто поменяет цвет в .title. А потом выяснится что заголовки в товарах тоже поменяли цвет. А не надо было.

    Короче, ребята, зачем вы ищете и выдумываете разную хрень? Всё уже придумано до вас — БЭМ. И не дураки это придумывали, а люди с большим опытом верстки и поддержки проектов разного уровня. А претензии типа "мне не нравятся длинные названия классов" — ну право же, детский сад, надо взрослеть.

    Ну и можно слегка поэкспериментировать, объединив SMACSS с BEM.
    Оставить уровни base и layout. Оставить уровень modules — по сути это будут БЭМ-блоки. Стейты выкинуть — состояния блока лучше в нем самом описывать. Темы — по желанию.

    если не использовать SASS - а это зачастую не используется, так как работаю часто с готовыми проектами.

    Если приходится лезть в готовый проект, то стоит изучить его и придерживаться стиля заданного автором. Если там нет никакого стиля, то сам бог велел наговнокодить =)) Ну или отрефакторить, если заказчик готов платить.
    Ответ написан
  • Как автоматизировать верстку с bem?

    dpr
    @dpr
    frontend developer
    Вам html генерить?
    Не знаю как другие реализации, но в phpStorm emmet умеет разворачивать такие конструкции:

    .block__elm_mod -> <div class="block__elm block__elm_mod"></div>


    В сочетании с остальными возможностями emmet можно довольно кратко описать целый компонент и развернуть его в html табом.
    Ответ написан
  • Эти картинки лучше делать через тэг img(или псевдоэлемент)?

    dpr
    @dpr
    frontend developer
    Именно эти картинки (иконки) лучше всего загнать в символьный спрайт и вставлять в html особой конструкцией (покажу ниже).

    Символьный спрайт — это один svg файл с набором множества символов. Из каждой иконки достается картинка (отбрасывается вся служебная инфа) и добавляется в общий файл тегом symbol. Такой файл-спрайт будет выглядеть примерно так:

    <?xml version="1.0" encoding="utf-8"?>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    
    	<symbol viewBox="0 0 60 60" id="accounting" xmlns="http://www.w3.org/2000/svg">
    		<path d="M59 20....."/>
    		<path d="M35 32....."/>
    		<path d="M38 5h....."/>
    	</symbol>
    
    	<symbol viewBox="0 0 60 60" id="archive" xmlns="http://www.w3.org/2000/svg">
    		<path d="M59 20....."/>
    		<path d="M35 32....."/>
    		<path d="M38 5h....."/>
    	</symbol>
    </svg>


    Обратите внимание на идентификаторы символов — по ним будут вставляться иконки в html. Также обратите внимание на отсутствие стилизующих атрибутов и атрибутов style в элементах (path) картинки. Это важно, если вы хотите задавать цвет картинки через css.

    Картинка из такого спрайта вставляется в html следующей конструкцией:

    <svg class="my-icon">
        <use xlink:href="images/svg-sprite.svg#archive"></use>
    </svg>


    Здесь указывается путь к картинке и после решетки тот самый идентификатор символа, указанный внутри спрайта.

    Теперь вы можете полностью управлять вставленной картинкой стилями:

    .my-icon {
      width: 50px;
      height: 50px;
      fill: orange; /* Цвет заливки */
      stroke: blue; /* Цвет обводки */
    }


    Вы можете задать цвет, равным currentColor, и тогда иконка будет того же цвета, что и свойство color. Это бывает удобно.

    .my-icon {
      fill: currentColor; /* Цвет заливки */
    }


    Примечание. В IE есть небольшие проблемы с этим способом. СВГ-спрайт должен быть вставлен в тело страницы. Рекомендую для устранения проблемы воспользоваться скриптом svg4everybody.
    Ответ написан
  • Как убрать отступ браузера справа?

    dpr
    @dpr
    frontend developer
    Очевидно, что у вас вылазят смещенные на 40 пикс вправо заголовки h1, которые внутри .grid-hover
    Причина: заголовок — это элемент блочного уровня, он занимает 100% ширины родителя. Когда вы его смещаете через position:relative, его ширина не уменьшается, а остаются те же 320 пикс, только правее.
    Ответ написан
  • Сетки, с чем их едят?

    dpr
    @dpr
    frontend developer
    Сетка нужна, в первую очередь, дизайнеру. Чтобы выстроить элементы дизайна ровненько, по феншую, на всех страницах одинаково — блоки на скачут в положениях и размерах.

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

    Всё остальное — следствие. Верстальщику становится мало просто классов для описания раскладки макета. Он решает приправить их медиа-запросами, чтобы и базовая адаптивность страницы была что называется "из-коробки". Опять же для упрощения и ускорения своего труда. Потом решает еще что-то добавить, к примеру смещение колонок и т.п.

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

    Потом появились дизайнеры, которые стали рисовать свои макеты "под бутстрап" =) Ничего плохого, это ускоряет (а значит удешевляет) разработку конечного продукта. Но нужно понимать, что дизайн первичен. А сетку можно любую сделать.
    Ответ написан
  • Как исправить некорректное поведение блока при наведении в браузерах Chromium?

    dpr
    @dpr
    frontend developer
    Ощущение, что браузер самостоятельно определяет в какую сторону "расширить" контент (увеличивающийся тег параграфа) так, чтобы он был на виду. А из-за флексов возникает визуального ощущение смещения соседнего контента. На самом деле изменяется скролл страницы.

    Интересно, что при наличии в области видимости других элементов, такого поведения не наблюдается. https://jsfiddle.net/s9n85rd7/106/

    Вряд ли это можно исправить.
    Ответ написан
  • А для чего @retina-dpi:144dpi; @retina-dppx:1.5dppx; и как часто используется и для чего @media(min-resolution: ??

    dpr
    @dpr
    frontend developer
    про retina-dpi:144dpi слышу впервые. а вот мин-резолюшн это вполне нормальное правило. Используется для подгонки дизайна под разную плотность дисплеев
    Ответ написан
  • Как правильно настроить CSS медиа запросы?

    dpr
    @dpr
    frontend developer
    Правило перекрывается более приоритетным селектором

    Всё верно.
    Селектор один и тот же. Но один (ваш) расположен во внешнем файле, второй встроен в страницу через тег style. При одинаковой специфичности селекторов приоритет отдается встроенному в страницу (срабатывает каскад).

    Выхода три
    1. Поместить свои стили в теле страницы после чужих.
    2. Вынести чужие стили во внешний файл, подключаемый перед вашим.
    3. Увеличить специфичность своего селектора. Это наиболее простой метод. Самое-самое простое — добавить !important своим правилам. Или включить еще какой-то класс/тег в свою цепочку селекторов.

    Есть еще 4 варик — исправить непосредственно чужой стиль.
    Ответ написан
  • "Колоночная простановка" flexbox?

    dpr
    @dpr
    frontend developer
    Флексы так не умеют.
    Как вариант, можете попробовать использовать колоночную раскладку.
    https://jsfiddle.net/0o3cps48/1/
    Ответ написан