Ответы пользователя по тегу Вёрстка
  • Как определить по макету Fullscreen блок или нет?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Если иное не оговорено\написано в ТЗ\очерчено дизайнером, то следует уточнить этот момент.

    Самостоятельно такие решения принимать можно в том случае, если ты полностью несешь ответственность за них и имеешь достаточно опыта для определения на глаз.
    Ответ написан
    Комментировать
  • Как один div центрировать по родителю, а второй сместить справа?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    На самом деле решений тут не одно:
    1. Можно визуально разбить на несколько частей всю секцию, скажем 2 1 1 1 (соотношение), где второй элемент замет 1 часть и получит центрирование текста, второй третью часть с выравниванием по левому краю, первый и последний это пустота, соответственно может быть выполнено отступами.
    2. Абсолютное позиционирование.
    3. Гриды с условиями деления секции как в пункте 1.
    4. И т.д.

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

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    1. Я вижу код, скопированный из разных источников, в том числе с сайта бутстрапа. Для начинающего неплохо, а в целом позорно.
    2. Как результат твоей работы тут почти нет, bootstrap, owl-carousel, wow, нарезанные картинки. Опять же, для начинающего вполне, а вообще не аллё.
    3. Валидность — кал, конечно, надо стараться. Правила можно нарушать, когда понимаешь, что именно, как минимум.
    4. Проверки на очевидные ошибки не проведены. И речь не о валидации, смотри консоль.
    5. Дизайн гавно, но это я хз кому вверять, тебе или автору творения (если он не ты).
    6. <body lang="en"> при русском контенте — за такое бить по рукам надо).
    7. ДВА. Сраных. Пробела. В тексте.
    8. PT Sans это зачет, да.
    Ответ написан
    4 комментария
  • Как выровнять базовую линию текста по низу?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. Типографика в вебе = боль.
    2. Vertical-align работает относительно строки, т.е. для вложенного элемента.
    3. Ты можешь указать line-height:1, тогда и сверху и снизу будет нулевой отступ (на самом деле ничего подобного, так как зависит все от шрифта, но попробовать можно).
    Ответ написан
    Комментировать
  • Как сделать отступ блока MARGIN-TOP равный высоте другого блока с POSITION: FIXED;?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. Это вопрос к JS, так как CSS пока динамически так рассчитывать не умеет. И врядли когда начнет, ибо стили-то каскадные.
    2. Никакого отношения к позицонированию данный вопрос не имеет.
    3. Проблемы можно решить без JS, если реализовать верстку с помощью position:sticky.

    С JS же решается следующим образом:
    var header = document.querySelector('.fixed');
    var content = document.querySelector('.static');
    content.style.marginTop = header.offsetHeight;

    В данном же виде это костыль, от которого следует оттолкнуться от при углублении в тему.
    Ответ написан
  • Как можно реализовать нестандартный блок?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    SVG
    Ответ написан
    Комментировать
  • Как сделать чтобы картинка собиралась с разных элементов?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    SVG импортируй прямо из редактора.
    Почисти, приведи в чувство код и радуйся. Можно и проанимировать.
    Ответ написан
  • Нужно ли дублировать блок для адаптивности?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Мыслишь логично, и:
    1. Flex-шаманство
    2. Grid-шаманство
    3. Перемещение элемента с помощью JS
    4. Да, тут уже идут костыли
    Ответ написан
    Комментировать
  • Вопрос по модификаторам?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега HTML
    Руководитель frontend направления, предприниматель
    1. Объявлять связи по БЭМ нужно жестко .social__btn в примере может быть использовано в другом месте, вне родителя, это не по БЭМ-у. Надо в css указывать явно .social .social__btn ....
    2. Остальное вроде корректно, но лично я бы так не делал.
    3. Еще есть примеси, которые актуальны в «подвале переопределить», но в данном случае так, как модификаторы по сути своей разные, этот вопрос некорректен, и данный метод не подходит. Тут просто 2 абсолютно разных модификатора, один красит в белый, другой в фиолетовый.

    PS: Модификаторы тоже должны иметь явную привязку к родителю, а не указываться отдельно.
    Ответ написан
  • Верстке еще нужна поддержка IE11 в 2019?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Пока мы будем оглядываться на осла и делать ему статистику, он будет фигурировать в списке все еще популярных браузеров. Поэтому я стараюсь избегать его всеми возможными методами. В большинстве проектов мы отказались от них напрочь, разве что еще не повесили «Идите куданадо» для тех, кто с IE заходит.
    Но, конечно, есть требования под него корректировать. По иннерции в основном. С последней обновы, а может и раньше, Мелкомягкие сами акцентируют внимание, мол вот, попробуйте Edge. Вот этот браузер, это лучше, но тоже дает о себе знать при отладке.
    А в плане работы по стандартам самый имба сейчас это Огнелис. Но они вроде как принимают активное участие в разработках спеки, поправьте меня те, кто этим всерьез интересовался.

    Сверху общая картинка, а резюмировать можно следующим образом, есть в ТЗ, пожаланиях, донеси до заказчика, что это ему не впилось, но без пены у рта и либо делай по факту поддержку, либо нет. А вот просто так лишний раз прошу этот кусок браузера не открывать.

    Сверху верно заметили, префиксы сейчас не нужны. Браузер = доступ в интернет = автообновления = актуальная версия браузера, а если пользователь убирает галочку с автообновы, это его сознательный выбор. А все современные браузеры отлично понимают без префиксов. Они требуются буквально в единичных случаях. И там могу порекомендовать не делать так. Т.е. не творить ту гадость, что требует префиксов, в духе изменения дизайна скроллбара и прочей дичи.
    Ответ написан
    1 комментарий
  • Как блок поставить справа?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    .header__img {
       ....
       margin-left: auto;
    }


    Это добавь
    Ответ написан
    Комментировать
  • Знак ₽ или U+20BD?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Как ни удивительно, но есть википедия, которая обозревает этот вопрос.

    От себя акцентирую внимание на то, что шрифт должен поддерживать этот символ.
    Ответ написан
    Комментировать
  • Как сделать так, что бы ссылка оставалась такой после нажатия на неё?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Я так подозреваю, что это табы. Для табов надо использовать JS и навешивать класс, к примеру .active на табу.
    Ответ написан
    Комментировать
  • Смещается картинка, что делать?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. Вкладывать в Hn в a нельзя (в широком смысле — блочные в инлайновые)
    2. Позиционирование\марджины\трансформирование в помощь
    Ответ написан
    Комментировать
  • Адаптация вёрстки под ie10, как это реализовать?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    https://getbootstrap.com/docs/4.0/getting-started/... — описание поддержки браузерами.
    Использовать бут сейчас не рекомендую, полным пошло ошибок по W3C. Для поддержки 9 и 10 IE надо использовать третий бут.

    А адаптация делается посредством установки необходимого браузера и тестирования. Ну и можно смотреть на https://caniuse.com/ теги и свойства.
    Ответ написан
    2 комментария
  • Стоит ли на моём этапе изучения приступать к js?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    JS для верстки учить надо обязательно. Хотя бы для начала на уровне переключения классов и перехвата событий. Я недавно рассуждал на тему фронтендщика\верстальшика и если интересно почитать можно на сайте моей команды (в профиле ссылка). Там есть инфа за пакет знаний, которые лично я считаю обязательными.
    Я хоть лично и недолюбливаю JS, все же понимаю, что без него никуда. Хочешь делать крутые сайты нужен js. Хочешь оптимизировать крутые сайты, нужен js. Главное — не лезть в jQuery. Без него трудно найти интеграции, но можно. А в большинстве случаев и не надо.
    Ответ написан
    Комментировать
  • Укажите на ошибки в вёрстке?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. HTML язык, конечно, лояльный, но в символах полный ахтунг. Атрибуты (читай классы) в html заковываются в кавычки.
    2. Пробелы и переносы, это, правда, типичные ошибки начинающих и не только самоучек. Пока по шапке проверяющий с опытом не выдаст дойти трудно.
    3. Ну да и вообще на лицо ощутимой непонимание того, что и для чего это все надо. Вот это, к слову, частично поможет.
    Ответ написан
    4 комментария
  • Как вставить картинку в центр?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Ох ты ж ну... 0_о

    Картинку режь на 3 части, шапка, подвал и повторяющаяся полоса между ними. Дальше либо «3 дива», либо after и before.

    Ну или svg.
    Ответ написан
    Комментировать
  • Не сохраняются изменения в html на Битрикс?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега HTML
    Руководитель frontend направления, предприниматель
    Ну вообще кеш может. *Нервно крещусь при слове «Битрикс»*. Его можно и нужно запретить на время разработки. Или внесения крупных изменений в прод. А потом снова включить.

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

    З.Ы. я с такой проблемой сталкивался, с откатами одна из версий да, это кеш. Всего у нас было 3-5 причин, но их я не помню.
    Ответ написан
    Комментировать
  • Как убрать лаги при прокрутке сайта?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Сбрось кеш своего браузера
    Ответ написан