Jump to content

SelenIT

Expert
  • Posts

    4,327
  • Joined

  • Last visited

  • Days Won

    140

Everything posted by SelenIT

  1. Как вариант — воспользоваться хаком типа такого. А вообще ждать грид-раскладки, там есть средства, чтоб делать такое «из коробки».
  2. SelenIT

    Polyfill

    В какой-то мере это слово происходит от названия продукта или компании (как скотч, унитаз, ксерокс и т.п.). Только с ним еще более веселая вещь произошла — оно стало нарицательным еще в самом английском, и заимствовалось уже в таком виде. Поэтому если и переводить его, то только по смыслу, и я не знаю, как передать его короче, чем «Костыль» («подпорка») — имхо, шире по смыслу: «костыли» бывают и для текущих браузерных багов, а полифил — он именно для будущих (потенциально) стандартных вещей.
  3. Это действительно было очень давно:). Тогда еще попадались якоря через <a name="..."> и была актуальна поддержка IE6-7. В каком-то из тех IE и был баг, что document.getElementById("something") мог вернуть элемент с name="something". Сейчас неактуально. Мне тоже любопытно. Подозреваю, что речь о рекомендациях какой-то конкретной методологии. В БЭМ вообще вот так.
  4. SelenIT

    Polyfill

    В словарике сообщества «Веб-стандарты» закреплен вариант «полифил». Я за него «Полизаполнение» и его аналоги — по-моему, какой-то жуткий полуперевод. В англоязычных странах используется метафора «шпаклевки», сглаживающей и заделывающей «дырки и шероховатости» в браузерном «ландшафте», и название пошло от самой популярной марки этой самой шпаклевки. На русском и метафора не прижилась, и марка шпаклевки почти неизвестна, так что от перевода половины названия оно не перестает быть нелепой тарабарщиной.
  5. У него есть нюансы с браузерной поддержкой. К счастью, он очень легко полифиллится (там же чуть выше есть пример).
  6. А сколько весит фоновая картинка fon08.jpg?
  7. Первый потомок документа — доктайп, потом уже идет корневой элемент. А во втором случае, полагаю, первым потомком body считается текстовая нода с символом перевода строки между <body> и <p>.
  8. Вот с пчелами «скачков» не заметил (возможно, от размера экрана зависит?), но, полагаю, да... Кстати, вообще желательно по возможности уходить от анимации top/left и т.п., а вместо них анимировать transform: translate*. Должно быть и плавнее (никаких reflow/repaint, только перекомпозиция слоев), и проще в управлении (не будет вот такого конфликта координат). Но да, в сочетании с другими трансформациями это может быть не так просто...
  9. И только в начальный/конечный момент применяется top, заданный непосредственно шарику (280px). Вот и получается, что между 91% и 100% он, плавно проявляясь из прозрачности, меняет top с 480 на 280px — «выпрыгивает снизу». А к отметке 33% опять туда опускается. P.S. Зачем никому не нужные -moz-animation-* и особенно -ms-animation-*, и где, где стандартный беспрефиксный animation-*?
  10. Зачем такие подвыподверты? Почему не сделать нормальной человеческой ссылкой? HTML5 ведь специально разрешил вкладывать в нее блочное содержимое... Где этот :hover в примере?
  11. SelenIT

    margin в %

    Может, просто сделать ему display:flex, и пусть растягивает свободное пространство, если оно есть, и держит минимальную ширину по содержимому, если растягивать нечего?
  12. SelenIT

    margin в %

    И всё равно не канает. Во-первых, box-sizing: border-box не учитывает margin-ы. Во-вторых, это всё равно не решило бы проблему циклической зависимости.
  13. SelenIT

    margin в %

    Проценты считаются от контейнера. Который сам инлайн-блок и поэтому имеет ширину по содержимому. Если пытаться учитывать в этой ширине процентные же отступы — будет циклическая зависимость. Поэтому браузеры сначала определяют ширину контента с учетом всех фиксированных составляющих (текста и паддингов/бордеров/марджинов в конкретных единицах длины), а потом высчитывают от этой суммы проценты и добавляют их где нужно. Вот и получается, что эти проценты добавляются сверх ширины контейнера, отчего блокам и приходится переноситься.
  14. Во-первых, чтобы height: 100% применился, должна быть явно задана высота родителя (и не через min-height, а конкретно через height). Если нужно 100% от окна браузера, height: 100% должно стоять у всей цепочки предков, вплоть до html. Иначе сам контейнер video не растянется. А уже когда он растянулся, можно применить object-fit: fill или cover, смотря какой эффект масштабирования нужен (искажение или обрезка лишнего).
  15. Переключение слайдов слайдера? Или страниц пагинации? Если второе — то, скорее, не «за счет», а «несмотря на». Вообще говоря, не должно и тем более не гарантировано. В мобильных браузерах и т.п. могут быть сюрпризы. Можно всё-таки увидеть пример решаемой задачи в действии? Думаю, есть смысл потратить еще полчаса и найти решение, не противоречащее стандартам и общей логике.
  16. ??? Что значит «<input> работает», если происходит переход по ссылке (уничтожая старую страницу, вместе с <input>-ом и его состоянием) и появляется совершенно новая страница? Это ссылка работает, а <input> здесь как-то вообще ни при делах. Да и по спецификации нельзя вкладывать в ссылку интерактивные элементы. В чем конечная задача? Сделать навигационное меню, стилизованное под список радиокнопок?
  17. Уточните, что вы понимаете под «сдвигом фона» и «изменением размеров фона». Потому что технически при background-size: cover размер фона именно что изменяется (синхронно с размером окна), а левый верхний угол фона при ресайзе будет смещаться относительно левого верхнего угла окна при любом background-position, кроме 0 0 (aka left top). По тексту можно бы предположить, что вам нужен просто background-position по центру, с дефолтным background-size:auto. Но это не стыкуется с другими заявленными требованиями. Похоже, в текущей формулировке вы хотите взаимоисключающих вещей.
  18. SelenIT

    Стандарты

    Во-первых, я бы отсортировал статусы от самого сырого к самому зрелому: по последней версии процесса W3C это цепочка (FPWD -) WD - CR - PR - Rec. Лично для меня «Черновик (Draft)» — это просто неофициальный, «разговорный» синоним для WD. Официально такого статуса, насколько мне известно, нет. Бывают неофициальные «Proposals» и официальные FPWD, но FPWD — тоже WD, возможно, для обзорной статьи даже нет смысла выделять его отдельно. Раньше еще был LCWD (последняя стадия WD перед CR), но в 2014 году его отменили. А ED — это отражение текущей работы над спекой, независимо от текущего статуса, аналог trunc в системе контроля версий, где правятся текущие баги и т.п. Так что это еще и самая актуальная версия спецификации. Время от времени с этого ED делаются «снимки» (snapshots), которые и публикуются в разделе TR как очередной WD, очередная CR и т.д. (либо как Note, если развитие спецификации прекращено). Но по большому счету эти «снимки» очень быстро теряют актуальность относительно текущей работы (ED). Они ценны в основном для истории и для юристов, проверяющих спецификации на патентную чистоту перед утверждением. А разработчики браузеров и тестов ориентируются именно на ED. Недавно был вообще забавный случай, когда браузеры обновили свою реализацию (убрали поддержку grid-template, которую CSSWG на совещании в рабочем чате решила убрать из CSS Grid) даже раньше, чем редакторы обновили соответствующий ED. Что уж говорить о «снимках»...
  19. У радиального градиента же есть специальные ключевые слова типа farthest-side, чтобы указывать, расстояние до чего брать за 100%.
  20. В общем случае Если в штате заказчика есть контент-менеджер, нарезающий картинки по нужному стандарту, в админке есть аплоадилка с ресайзером опять же до нужного размера и т.п. — это просто замечательно. Но хорошая верстка на то и хорошая, что должна потенциально быть готова к любым сюрпризам и не ломаться от них. К счастью, в большинстве популярных скриптов для слайдеров эта проблема обычно уже как-то решена.
  21. Возможно, какие-то идеи отсюда помогут?
  22. Это не наследование стиля. Такие штуки, как фильтры, opacity, трансформации и т.п. применяются к элементу как к единому целому, как к сплошной картинке. Применить их выборочно ко всему, кроме определенных потомков, нельзя.
  23. Может, даже так: http://codepen.io/SelenIT/pen/GZKbMo?editors=1100. Фокус в том, что border-spacing — наследуемое свойство, и подхватывается даже анонимными боксами.
  24. А оставить таблицу, сгруппировав колонки в colgroup-ы, и скрывать их — не вариант?
  25. Еще :first-of-type есть, тоже может пригодиться для подобных случаев.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy