SelenIT

Эксперт
  • Публикации

    4 293
  • Зарегистрирован

  • Посещение

  • Дней в лидерах

    135

Последний раз SelenIT выиграл 14 декабря 2017

Публикации SelenIT были самыми популярными!

Репутация

995 Хорошая

О SelenIT

  • Звание
    глюк

Контактная информация

  • Web site
    http://css-live.ru/
  • ICQ
    0

Информация

  • Пол
    Мужчина

Посетители профиля

16 869 просмотров профиля
  1. Позиционирование списков

    3. Используйте display:flex для контейнера и забудьте извращения с убиранием пробелов и «клирфиксингом» флоатов как страшный сон* * ну ладно, совсем не забывайте, оставьте как фолбэк для 2% совсем ископаемых IE:)
  2. Отображение текста в браузерах

    Есть подозрение, что это «ложный жирный». Попробуйте подключить жирный вариант этого шрифта отдельно, чтобы браузеру не приходилось «синтезировать» его из обычного.
  3. Верно ли я понимаю, что всё, кроме кнопки «Add to cart», ведет на отдельную страницу товара, и только кнопка выполняет специальное действие?
  4. Интерактивные элементы (в том числе другие ссылки) нельзя в ссылку вкладывать. Кроме этого в ссылку можно вкладывать всё, что можно вкладывать в ее родителя. «Блочностью и строчностью» в современном HTML лучше вообще не заморачиваться, не всё сводится к этому делению, и от него больше путаницы, чем пользы. А что в карточке товара — другие ссылки?
  5. Не могу заставить <button> действовать как inline

    Мир несовершенен:(. Но, справедливости ради, чем дальше, тем таких несуразных ограничений меньше.
  6. Не могу заставить <button> действовать как inline

    button — некая «вещь в себе», которая заключена в «волшебный» контейнер с display:inline-block, и плювать хотела на явно заданные стили, к сожалению:(. Очень многих лет уговоров стоило убедить разрабов браузеров (прежде всего Мозиллы), что такое поведение — не фича, а вообще-то баг, и что display кнопки должен слушаться заданных стилей (в частности, кнопка должна уметь становиться флекс- и грид-контейнером), но display:inline для кнопки — последний рубеж, который пока никак не поддается. Единственный известный мне обходной путь — задать кнопке display:contents и работать со вложенным в нее span-ом — работает пока только в Хроме с включенным экспериментальным флагом (возможно, в Сафари ТП теперь тоже). В качестве обходного варианта можно задать для кнопки <label>, а саму кнопку скрыть (как при кастомизации чекбоксов/радио).
  7. Приоритет селектора класса над селекторами типа

    Приоритеты по специфичности относятся к разным селекторам, применяющимся к одному и тому же элементу. Но любой селектор, применяющийся к самому элементу, всегда приоритетнее стилей, доставшихся этому элементу по наследству (неважно от кого). Поэтому для ссылки приоритетнее стиль, заданный конкретно для ссылок, чем стиль, доставшийся ей по наследству от body или элемента с классом. И т.д.
  8. Особенности background-size: cover

    У вас в атрибуте style стоит сокращенное свойство background, которое включает в себя background-size и, соответственно, перебивает его (на дефолтное значение auto в данном случае, т.к. не указано иное). Указывайте там только background-image, а всё остальное (включая background-size) перенесите в стили, и всё будет ОК.
  9. Якори

    Если в самом конце, эффект тоже может быть не заметен (конец страницы нельзя поднять к верхней части окна). Эффект заметен, если страница длинная, и между якорем и ссылкой на него приличное расстояние (порядка высоты экрана и больше).
  10. Проблема с button

    Почему это внутри цикла? Вот кнопки, кроме первых трех, и оказываются вне формы... Вообще возьмите за правило — отлаживайте ту часть системы, в которой проблемы, а не всю систему как «черный ящик». Если проблема в работе HTML — смотрите сгенеренный HTML, а не PHP-исходник. Так будет намного нагляднее и быстрее...
  11. div и display. Блочная вёрстка.

    Да, можно. Всё так и есть. Вся путаница из-за многозначности слова «блок». В HTML «блок» — это логический, структурный элемент страницы: абзац, заголовок, список, раздел документа, форма и т.п., из которых, как из кубиков, выстраивается логическая структура страницы. В HTML4 таких элементов было мало, поэтому для любых мало-мальски нестандартных группировок (напр. объединить заголовок, вводный абзац текста, абзац с датой и автором и картинку в более крупный блок «анонс новости», чтобы потом из таких блоков построить еще более крупный блок «лента новостей») приходилось использовать элемент <div> — поэтому он и считался «основным строительным блоком» (опять «блок!») страницы. Сейчас есть много более специализированных логических контейнеров — <nav> для навигационных меню, <header> для вводной информации и <footer> для вспомогательной, <main> для основного контента и <aside> для связанного лишь косвенно, <article> для самодостаточных сущностей и <section> для отдельных смысловых частей чего-то более крупного, <figure> для иллюстраций и примеров, <summary> для раскрывающихся подробностей и т.д., и лучше по возможности пользоваться ими по назначению. А в CSS "block" — один из типов отображения (элемент по умолчанию начинается с новой строки и заполняет прямоугольник, вписанный своими margin-ами в доступную ширину контейнера, а уже внутри этого прямоугольника могут быть либо другие блоки, либо строки с текстом и строчными элементами). Вообще вся визуальная структура страницы состоит из вложенных друг в друга прямоугольников разного типа, которые по английски называются «box» (букв. «коробка»), отсюда «box model» (все эти margin/border/padding/width/height), которую по-русски традиционно почему-то стали называть «блочной моделью» — вот еще одна причина путаницы. Есть и другие типы отображения (и, соответственно, «box»-ов) — "inline" (строчный, элемент вписывается в строку текста, при необходимости разрываясь на несколько строк), "inline-block" (строчно-блочный, элемент образует монолитный прямоугольник, и этот прямоугольник целиком встраивается в строку текста, словно картинка или одна большая буква), "flex" (флекс-контейнер, см. флексбоксы), "grid" (грид-контейнер, см. CSS-гриды), "table" (табличный) и т.д.. Все они различаются нюансами своей «box model» и правилами взаимодействия с содержимым и с соседями. Любому элементу можно стилями задать любой тип отображения (за редкими исключениями — есть нюансы с элементами форм и т.п.). Но логическая, структурная роль элемента от этого не изменится (и то, что в этот элемент можно вкладывать — тоже). Поэтому в современном HTML элементы делят не на «строчные и блочные», как в HTML4, а именно по логической роли — на структурные, текстовые, интерактивные и т.д. (причем многие элементы входят в несколько категорий сразу). В начале-середине 2000-х было модно говорить о «блочной верстке» в противовес табличной (раньше, в 90-х, страницы верстали, «нарезая» всю страницу на ячейки одной таблицы, частично объединенные через rowspan/colspan, и распихивая контент по этим ячейкам, другого тогдашние браузеры не понимали). Имелось в виду именно логическое структурирование HTML на логические же блоки, с последующим оформлением этих блоков через CSS (в принципе как угодно, хоть через тот же display:table, но чаще всего в дело шли float и clear). Сейчас чаще говорят о семантической верстке — использовать HTML-элементы по их назначению, как подходит по смыслу, а оформлять их как нужно по дизайну, используя все возможности современного CSS. Элемент div по-прежнему важен, когда нужно соорудить «что-то этакое», для чего нет стандартного элемента, или нужна добавочная обертка, чтобы подстраховать старые браузеры — но в целом сейчас его роль скорее вспомогательная.
  12. Боюсь, что нет:(. Родительского селектора пока ни один браузер ни в каком виде не реализовал...
  13. Вот это, к сожалению, CSS-ом сейчас никак не описать. Ни плюсик, ни тильда не умеют проверять наличие/отсутствия текстовых нод. Умеет только :empty, но он, очевидно, тут не подходит. Так что добавлять padding инлайновым элементам, над которыми нет полного контроля — изначально была не лучшая идея. Теперь, если юзер сделал бяку, придется терпеть :(. Можно разве что немного смягчить последствия бяки отрицательными margin-ами, прозрачностью у фона и разрядкой букв, чтобы стыки padding-ов внутри были не так заметны, типа такого...
  14. Подскажите как сделать

    Способы-то есть всегда — можно без псевдоэлементов через множественные фоны, можно вообще через border-image. Надо смотреть по конкретной задаче — что за блок, как он растягивается и вообще ведет себя при разных размерах окна и контента, есть ли другие элементы, которые не должны с ним перекрываться...
  15. Дизайнеры не виноваты. Но да, на флексах придется именно извращаться, и результат получится очень негибким. О такой адаптивности «из коробки», как в примере mrnobody выше, придется забыть:( Как вариант, можно попробовать скриптом проверить, применилось ли к контейнеру какое-либо из гридовых свойств (через window.getComputedStyle), и если да, то ничего не делать (всё сделают гридовые стили), а если нет — динамически добавить на страницу скрипт Masonry...