Ответы пользователя по тегу Вёрстка
  • Так сколько изображений надо готовить для адаптивного сайта (+ retina)?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Бери одну картинку, размером "требуемая максимальная ширина экрана помноженная на два" и делай ее. Это самый простой вариант. Если хочется немного пооптимизировать, то бери две картинки - одна большая как в первом случае, а вторая - в два раза меньше. Оптимизировать отдельно для каждого устройства не обязательно - на скорость загрузки это особо не влияет. Картинки только не забудь сжать оптимизатором)

    Судя по всему, ты хочешь первый экран сделать с большой картинкой на всю ширину. Тогда ставь ее через background-image и медиа-запросы. В общем все)
    Ответ написан
  • Можно ли так назвать класс?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Называть классы лучше так, чтобы по названию можно было понять что он делает. Длинные имена в общем не проблема. можно попробовать использовать BEM-подход или взять оттуда некоторые принципы и написать собственную методологию. Например у меня все классы делятся на несколько категорий:

    row (горизонтальный блок на сайте)
    col (делит row на несколько секций)
    wrap (оборачивает компонент, который находится внутри col)
    item (сам компонент)
    text (текст, который находится внутри компонента)

    У каждой категории классов есть свой набор свойст которые к нему применяются. Например сетка работает с col-классами и следовательно, когда я вижу класс типа .col-width-50-s, то я знаю что тут структурный стиль для сетки, в котором присваивается ширина 50 процентов на мобилах. А класс item-table_caption это заголовок компонента-таблицы.
    Когда в голове создашь свою иерархию классов, то проблем с названием селекторов не будет и их очень легко читать/писать станет.

    У такого подхода есть как плюсы, так и минусы.
    Плюс - вы берете самые интересные решения из разных методологий и создаете инструмент под себя (мне нравится атомарный подход, mcss и bem, но у всех них есть свои недостатки)
    Минус - другие разработчики не всегда могут читать ваш код также легко как и вы. Однако, как показывает практика, методологии приходят и уходят и возможно изобретенный вами подход станет новым стандартом в будущем)
    Ответ написан
    Комментировать
  • Как загружать контент по очереди?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Можно сделать, но будет грузить дольше по факту. Не вижу смысла тормозить загрузку картинок и ждать сначала загрузки шрифтов. Пусть все грузится параллельно. Для красоты можно добавить прелоадер, чтобы после загрузки шрифтов он исчезал, показывая страницу, а картинки уже потом сами подгрузятся по ходу дела (либо ждать пока все загрузится а потом отображать страницу)
    Ответ написан
  • Как оптимизировать onscroll?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Не слушай фанатиков Реакта)
    Они его даже в текстовый документ пытаются засунуть)
    Идеальную прокрутку на 60fps скорее всего не получится сделать, но можно приблизиться к идеалу, задействовав requestAnimationFrame. И еще будет иметь значение, какое именно свойство ты пытаешься анимировать при скролле. Максимальная производительность у opacity, translate, rotate и scale
    Ответ написан
  • Как правильно верстать под ретину?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Ретина только на картинки влияет, делая их размыленными. Самый простой способ - бери все изображения с увеличенным в 2 раза размером.
    Например нужна картинка 100 на 100 пикселей на сайте - бери картинку 200 на 200 и указывай ей размер в css 100x100.
    Таким образом ты заставишь ретина-дисплей отображать картинку с двойной плотностью пикселей.

    Есть еще экраны с х3 или х4 плотностью, но я не замечал стлной разницы в качестве изображений на них, так что можно забить.

    Если хочешь немного увеличить производительность и скорость загрузки сайта - можешь определять плотность пикселей и выдавать под ретину большие картинки, а под простые экраны - обычные. Я лично тоже забил на этот геморрой, так как в целом простота поддерживаемости кода и удобство его написания перевешивают плюсы от увеличения производительности.
    Ответ написан
  • Почему Мозилла не высчитывает процент?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Это особенность поведения firefox. В спецификации нет четкого правила, как должны вести себя браузеры если вертикальный margin или padding указывается в процентах внутри флекс контейнера. На выбор браузерам там предоставляется два возможных поведения - значение исчисляется относительно ширины контейнера или относительно его высоты. Firefox считает вертикальный margin/padding в процентах относительно высоты контейнера. Так что надо либо отказаться от процентов, либо задать контейнеру высоту.
    Ответ написан
    Комментировать
  • Корректность использовани тега i для иконок?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Есть мнение, что как раз семантично и правильно делать это через тег i
    Ранее, до html5 этот тег был просто презентационным и использовался для italic текста, но позднее был переопределен под любой текст, написанный отличительным манером от основного текста. Вот что говорит mdn:

    The HTML Element represents a range of text that is set off from the normal text for some reason, for example, technical terms, foreign language phrases, or fictional character

    Fictional character это как раз наш вариант с иконками.
    Ответ написан
    Комментировать
  • Востребованы ли верстальщики в 2016?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Пока будет существовать арбитраж трафика, будут существовать лэндинги на которые он льется. Требования к таким сайтам минимальные и платить за них много никто не будет. Следовательно спрос на юных верстальщиков готовых сделать сайт за 1000 рублей будет сохраняться. На этом можно набраться опыта, если устраивает такой расклад и спустя год возможно получится устроиться в какую либо контору, которая имеет постоянные заказы и соответственно может нагрузить работой и даже оплатить ее относительно нормальными деньгами.
    Ответ написан
    Комментировать
  • Позиционирование должно идти по видимой области браузера(position: absolute)?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    У вас ошибка в определении. Абсолютно-позиционированный элемент размещается относительно ближайшего предка с позиционированием, отличным от static.
    А вот фиксированное позиционирование оно уже задается относительно окна браузера.
    Ответ написан
    Комментировать
  • Можно ли скрыть стилем заголовок h1 только ради верного построения семантической верстки?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    И помимо того что в этом нет смысла, робот гугла может заподозрить вас в cloacking-e
    Ответ написан
    Комментировать
  • Какие способы создания адаптивной сетки сейчас актуальны?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    А мне Скелетон понравился
    На его основе сделал свою сетку с "клерфиксом и врапперами" ))
    Ответ написан
    Комментировать