• Можно ли с помощью flexbox переместить элемент из одного блока в другой?

    @BelkinVadim
    Frontend разработчик
    Нет, на флексах нельзя перемещать элементы между разными контейнерами. Как вариант, лучше продумать структуру верстки и возможность перестраивания порядка элементов
    Ответ написан
  • Почему растягивается элемент?

    @BelkinVadim
    Frontend разработчик
    По-умолчанию элементы флекс-контейнера растягиваются на всю его высоту, за это отвечает свойство align-items у флекс-контейнера, по-умолчанию оно имеет значение stretch. Вам нужно просто переназначить его на нужное значение, например flex-start
    Ответ написан
    Комментировать
  • Существует ли список css свойств, которые начали подддерживаться в ios 11?

    @BelkinVadim
    Frontend разработчик
    Ответ написан
    Комментировать
  • Как написать паттерн для валидации input?

    @BelkinVadim
    Frontend разработчик
    Атрибут pattern принимает регулярные выражения. Вам нужно почитать про регулярные выражения, чтобы можно было самому написать регулярки под свои требования.
    Либо ищите на подобных ресурсах rgxp.ru, regexlib, regexhub готовые выражения под Ваши требования
    Ответ написан
    Комментировать
  • Как задать ширину 100% блоку?

    @BelkinVadim
    Frontend разработчик
    Вам нужно растянуть контейнер на весь экран, самый простой вариант это ширина 100%, затем сами слайды так же должны быть на весь экран - так же 100% ширина. А следующий шаг это сделать слайды в одну строку и скрыть те что не умещаются - тут вариантов несколько, можно на флексах с запретом переноса (он по-умолчанию), можно на инлайн блоках с запретом переноса.
    Ответ написан
    Комментировать
  • Как грамотно выровнять сетку товаров?

    @BelkinVadim
    Frontend разработчик
    Поддерживаю Дмитрий Кузнецов, либо на флексах и сетку и сами колонки делать, чтобы сами колонки растягивались по максимальной в ряду, и внутри колонки сама фотка расстягивалась на большу часть. Но тут есть нюансы, при появлении многострочного текста.
    Я бы все же сделал фиксированную область под фотки (пропорциональная и квадратная), а само изображение отцентровать в этой области и не давать ему растягиваться большой любой из сторон этой области. Тем самым все блоки с фотками будут одного размера. Пример
    Ответ написан
    1 комментарий
  • CSS подключение шрифта - font-weight: Extrabold - не работает, а вот font-weight: 800 - работает. Почему так?

    @BelkinVadim
    Frontend разработчик
    Вам тут все написали, что для CSS не существует значения Extrabold для font-weight. Имеено CSSзначения, а не шрифта с таким начертанием. Шрифты с таким начертанием есть, но в  CSS текстового значения этого начертания нет, только числовое - font-weight: 800;
    Текстовые значения данного свойства могут быть только normal | bold | bolder | lighter

    В первом варианте вашего кода все становится Extrabold из-за того что для подключенного Extrabold начертания font-weight указан с ошибкой (не существует значения font-weight), по этому данный шрифт применяется к normal/400 начертанию
    Ответ написан
    Комментировать
  • Как убрать крестик у input type="date"?

    @BelkinVadim
    Frontend разработчик
    Обычно все эти доп.контролы сделаны через псевдоэлементы. В каждом браузере они могут называться по разному и обычно с префиксом данного браузера.
    Пример
    В хроме и вебкитовых браузерах отключается через псевдоэлемент ::-webkit-clear-button, а для Firefox не знаю к сожалению, вроде как поддержка type="date" в мозиле появилась не так давно, по этому информации о её контролах я не нашел
    Ответ написан
    Комментировать
  • Как сверстать такую плитку?

    @BelkinVadim
    Frontend разработчик
    Пример. Подобный результат нужен?
    1. Создаете адаптивную сетку
    2. Для картинок добавляете обертку с трюком для пропорциональных размеров через вертикальный padding и располагаете картинку внутри такого блока
    Ответ написан
    Комментировать
  • Как заставить работать стили в Safari в iOS?

    @BelkinVadim
    Frontend разработчик
    У вас сам номер телефона (тот что написан текстом), не является ссылкой, просто текст внутри span. А сафари "умный", он распознает в тексте номера телефонов и оборачивает их в ссылки (<a href="tel:номер">номер</a>). А к ссылке уже стандартные стили применяются.
    Выход:
    1. Отключить метатегом замену на ссылки в сафари.
    <meta name="format-detection" content="telephone=no">

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

    @BelkinVadim
    Frontend разработчик
    Соглашусь с Антон Спирин, тут больше к общему UI/UX, а не просто веб.
    Попробуйте почитайте или изучите какие-то дизайн системы, как правило там описаны и аргументированы многие решения по UI/UX. Например, можно почитать документацию к Material Design, сама система сделана довольно таки качественно.
    Ответ написан
    Комментировать
  • ES6 модули на локалке. Или как обойти CORS?

    @BelkinVadim
    Frontend разработчик
    Не пробовал, но возможно какие-то расширения для браузера помогут (типа такого)

    Сам, кстати, с подобной проблемой сталкивался и мне помогла сама IDE. Пользуюсь WebStorm, он же при открытии страниц через саму IDE открывает страницы в localhost, не вникал в суть, но видимо сама IDE создает что-то вроде локального сервера (без nodejs, своими силами так сказать). Единственный нюанс, для работы с импортами в настройках нужно включить https://monosnap.com/file/RvlDRly1x2GfEWkeVXBOqFmk... иначе при открытии или обновлении страницы IDE будет запрашивать разрешение на каждый импортируемый ресурс, что очень неудобно
    Ответ написан
  • Как растянуть flexbox (.container) на всю высоту?

    @BelkinVadim
    Frontend разработчик
    .middle нужно сделать флексом чтобы контейнер внутри так же растянулся https://jsfiddle.net/d8amj3hw/3/
    Ответ написан
    Комментировать
  • Как выронить по вертикали кнопку?

    @BelkinVadim
    Frontend разработчик
    Если нужно именно средствами html для таблиц, то для выравнивания по вертикали в таблицах есть атрибут valign (смотрите поддержку). Это чисто html'ный способ.
    Но можно добавить инлайн стили к тегу ячейки vertical-align: middle, отчасти тоже с помощью html :-D, т.к. не нужно подключать стили и делать выборку элемента селекторами
    Ответ написан
    Комментировать
  • Как сверстать блок, который увеличивается, не трогая остальные?

    @BelkinVadim
    Frontend разработчик
    Обычно используются отрицательные margin для компенсации увеличения размера. https://codepen.io/anon/pen/GQjbKx
    Ответ написан
    Комментировать
  • Как сверстать такую таблицу? table или div?

    @BelkinVadim
    Frontend разработчик
    Из-за особенностей дизайна проблематично сделать через стандартное табличное поведение (добавить тени и отступы между строками т.к. элементы с display: table-row не дают такой возможности).
    Но в данном случае, если важна семантика и доступность (Web Accessibility), я бы все же использовал table и сопутствующие теги, изменив у них свойства display на block и flex где нужна блочная или горизонтальная раскладка (это позволит добавить тени для tr и отступы между ними).
    Естественно все можно сделать так же на div и даже добавить role и aria-* атрибуты если опять же важна доступность.

    В любом случае выбор решения зависит от требований к реализации (поведение строк и колонок при изменении контента и изменениях размера таблицы или экрана, необходимость соблюдения семантики и доступности, возможно еще какие-то особенности).
    Если у вас достаточно времени для реализации данного UI, то я бы посоветовал попробовать сделать на таблицах, а если будут сложности - всегда можно переделать на блоки.
    Ответ написан
    Комментировать
  • Как на css сделать такую форму?

    @BelkinVadim
    Frontend разработчик
    Если поддержка IE11, то только через svg маски
    Тут пара способов для IE подойдет
    Ответ написан
    Комментировать
  • Как исправить баг на Firefox c select?

    @BelkinVadim
    Frontend разработчик
    Видимо в ФФ при наведении на пункты select с блока пропадает hover. Возможно выходом будет привязываться как-то к focus на селект. CSS'ный focus-within возможно поможет или скриптами при фокусе на селект добавлять класс для блока через который селект будет так же виден аналогично ховеру
    Ответ написан
    Комментировать
  • Зачем flex-basis писать в процетах?

    @BelkinVadim
    Frontend разработчик
    Вас интересует почему в качестве единиц измерения выбраны проценты или чем flex-basis от width отличается?
    1. Процент - относительная единица измерения и позволяет сделать сетку максимально адаптированной к любому контейнеру
    2. Про разницу flex-basis и width читайте тут например
    Ответ написан
    Комментировать
  • Как задать такую специфичность?

    @BelkinVadim
    Frontend разработчик
    https://jsfiddle.net/rpyhosmd/
    Учитесь правильно читать селекторы и проверяйте валидность разметки (ul не должен быть в p, хром например его выносит, и ошибка в теге span)
    Ответ написан
    Комментировать