SelenIT

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

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

  • Посещение

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

    137

Последний раз SelenIT выиграл 13 июля

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

Репутация

997 Хорошая

О SelenIT

  • Звание
    глюк

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

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

Информация

  • Пол
    Мужчина

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

17061 просмотр профиля
  1. SelenIT

    Неправильно отображается порядок объектов.

    appendChild, конечно же, добавляет в конец предка (по смыслу слова append). Чтобы вставить перед определенным элементом, нужно использовать insertBefore. Где стоял тег <link>, обоим этим методам неважно. Кстати, HTML-импорты по факту поддерживаются только в Хроме, но и оттуда их собираются выпилить. Не прижились 😞
  2. SelenIT

    Как обьеденить все

    Рискованный совет для 2018 года. Я бы сказал, что если блоки должны стоять в строчку, пора уже смело ставить display:flex родителю и не беспокоиться ни о пробелах между тегами, ни о размерах (в главном), ни о выравнивании высоты и по высоте. А в тех 3% ископаемых браузеров, которые этого не понимают, всё равно красиво не будет, как ни старайся (не одно так другое вылезет). Да и не стоят они того, в них главное чтобы текст читался.
  3. SelenIT

    Блок со скошенными краями

    При нехватке элементов закругления уголков можно в некоторой степени сделать теми же градиентами, а-ля http://jsfiddle.net/qs2hpr5j/1/. Но может понадобиться долго подгонять стыки...
  4. SelenIT

    Открытие ссылки в новом окне

    Я бы сделал примерно так: <table class="mytable"> <tbody> <tr class="mystolb" onclick="this.getElementsByClassName('js-action-link')[0].click()"> <td><img src="http://knigobiz.ru/wp-content/uploads/2018/05/LitRes.png" class="laravel-icon">ЛитРес</td> <td>Аудиокнига <a class="js-action-link visually-hidden" href="%%LitUrlAudio%%" target="_blank">(слушать)</a></td> <td>₽%%LitAudioPrice%%</td> <td><i class="fas fa-shopping-cart"></i></td> </tr> </tbody> </table> Для класса visually-hidden задать стили, делающие ссылку невидимой (лучше всего делать это скриптом же, по событию DOMContentLoaded или просто в конце <body>). Так даже юзеры с выключенным JS смогут открыть аудиокнигу в новом окне. А при включенном JS ссылка будет невидимой, но по клику на строку таблицы она сработает.
  5. SelenIT

    Проблема с кавычками в сплывающей подсказки

    Тут проблема в том, что собирается HTML-строка, а в HTML нет экранирования спецсимволов слешем. Для HTML кавычки надо экранировать как &quot;, т.е. str = "Описание: &quot;машина&quot;"; // строка для дальнейшего вывода в HTML А еще лучше в выводе использовать типографские кавычки («ёлочки» или “лапки”), которые и выглядят приятнее, и со спецсимволами ни в одном известном мне компьютерном языке не конфликтуют 🙂
  6. SelenIT

    line-height в inline и inline-block

    Строго говоря, не совсем. Грубо упрощая, у строчного элемента есть две высоты: та, которая заливается фоном, реагирует на :hover и т.п., и та, которая влияет на высоту строки, в которой элемент находится. Изначально обе высоты определяются исключительно метриками шрифта (что-то-Ascent — «надводная» часть символа над базовой линией, что-то-Descent — «подводная» часть, и, опционально, что-то-Leading — дефолтный зазор между символами соседних строк, причем разные ОС используют разные метрики). Браузерный отладчик, скорее всего, показывает для него первую высоту. Высоту заливки фона уменьшить нельзя, но можно увеличить верхним и нижним padding-ами. Высоту, на которую элемент «распирает» свою строку, можно и увеличить, и уменьшить — задав line-height. Разница между заданной line-height и дефолтной высотой (той, что по метрикам) делится пополам и по половине прибавляется сверху и снизу (так что элемент всегда центрируется в строке). Если line-height меньше, чем дефолтная высота, то фон элемента будет выступать вверх и вниз за границы строки, а буквы соседних строк будут частично перекрываться. Инлайн-блок же внутри устроен именно как блок, со своим собственным контейнером строки. И его высота определяется высотой этой строки (тем, насколько его текст ее «распирает»), т.е. конкретным значением line-height. А снаружи этот блок вписан в строку (как картинка) и влияет на высоту этой строки своими внешними габаритами (включая padding/border/margin).
  7. SelenIT

    Что такое Полифилл?

    Префиксы с полифилами в общем случае никак не связаны. Основная идея полифилов — реализовать что-то, чего браузер еще нативно не умеет (напр. fetch), через то, что он уже умеет (напр. XMLHttpRequest), пусть даже ценой добавочного, менее красивого и более медленного кода. Чтобы потом можно было остальной код писать стильно-модно-молодежно и он хоть как-то отработал даже в старье, и не надо было писать для старья отдельную ветку. Полифилить CSS труднее, чем JS, потому что костыли поневоле получаются заметнее (напр. чтобы заполифилить CSS Shapes, приходится напихивать в DOM добавочные элементы с обтеканием — по-другому, если в браузере нет нативных средств, обтекание по сложному контуру не сделать). Поэтому возможности у CSS-полифилов обычно ограничены и применяются они намного реже. Чтобы преодолеть эти ограничения, придумали проект CSS Houdini (набор JS API для низкоуровневых функций браузера, которыми обычно управляет CSS — парсинг стилей, расчет размеров и положения элементов, сама отрисовка и т.д.), который должен это облегчить, но эти API сами пока мало где поддерживаются...
  8. SelenIT

    Позиционирование списков

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

    Отображение текста в браузерах

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

    Не могу заставить <button> действовать как inline

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

    Не могу заставить <button> действовать как inline

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

    Приоритет селектора класса над селекторами типа

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

    Особенности background-size: cover

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