AlexZaw

Expert
  • Content count

    595
  • Joined

  • Last visited

  • Days Won

    48

Everything posted by AlexZaw

  1. Просто привык к ES5 🙂 Можно без проблем все var заменить на let, ну а const, на мой взгляд, здесь вообще негде использовать.
  2. var render = document.querySelector('[data-action="render"]'); var destroy = document.querySelector('[data-action="destroy"]'); var boxes = document.getElementById("boxes"); render.addEventListener("click", getAmount); destroy.addEventListener("click", destroyBoxes); function getAmount() { var amount = +document.querySelector("#controls input").value; createBoxes(amount); } function createBoxes(amount) { var basicSize = 30; var fragment = document.createDocumentFragment(); for (var i = 0; i < amount; i++) { var size = basicSize + i * 10; var div = document.createElement("div"); div.style.cssText = `width: ${size}px; height: ${size}px; background-color: rgba( ${random()} , ${random()} , ${random()} )`; fragment.appendChild(div); } boxes.appendChild(fragment); } function destroyBoxes() { boxes.innerHTML = ""; } function random() { return Math.floor(Math.random() * 256); }
  3. Может я что-то не так делаю, но у меня, по приведенной ссылке, все работает 🙂 Единственно что страница по ссылке this link недоступна
  4. Повторюсь. В приведенном вами коде все прекрасно работает. Проблема в другом месте. Покажите проблемный код
  5. Покажите код. У вас либо где-то заданы ширины ячеек, либо какая-то из ячеек в другом ряду растягивает остальные.
  6. Две ячейки таблицы, с выравниванием по верху, в левой картинка, в правой текст. Или я что то не понимаю?
  7. Все прекрасно работает, проблема где то в другом месте
  8. С изучения html и css 🙂
  9. Если свойства нет в спецификации, то откуда его возьмет браузер? Даже если в каком то одном из браузеров введут это свойство то смысла его использовать все-равно не будет, так как в остальных оно работать не будет 🙂 Тогда бардак творился, DHTML, разные объектные модели и все дела. У netscape действительно была такая фича. Хотя не факт что она работала. Вот тут https://www.uv.es/jordi/v3/html/dynhtml/dynamic.pdf можно увидеть что float:center; присутствует в коде, но следом написано что элементы можно выровнять с помощью float слева или справа, или с помощью js по центру. Также в книге указаны допустимые значения для float - left, right, none. Так что это скорее всего была запланированная возможность, которая не получила реализации.
  10. Это фейк, достаточно посмотреть документацию чтобы увидеть какие значения может принимать float. Ну и ссылка на имитацию: https://css-tricks.com/float-center/
  11. AlexZaw

    Помогите найти причину

    Вы про Zeplin? Так он тоже 100% точности не дает. Особенно если какой-то "одаренный" дизайнер перетаскивал слова с место на место, ну или просто промахнулся с сеткой. Да и сам фотошоп может написать что вес шрифта 400, хотя на макете четко видно что шрифт жирный/полужирный.
  12. AlexZaw

    Помогите найти причину

    Смотрите letter-spacing, line-height, возможно нужно поиграть с word-spacing. Так же есть вариант того, что дизайнер промахнулся с размерами, и некоторые слова выходят за границы сетки 🙂
  13. AlexZaw

    Учебники flexbox

    https://www.google.ru
  14. AlexZaw

    Вопрос от чайника №2

    @rasmus Тег <p> в семантике означает параграф текста. Чем его использование в форме противоречит семантике? С семантикой input сложнее. Да, изначально они были созданы для использования в формах, но, imho, с развитием веб стоило бы пересмотреть их семантическое значение. Возьмем к примеру распространенный случай. Есть сайты с калькулятором для расчета чего либо. С одной стороны можно завернуть этот калькулятор в форму, хотя бы для того, что-бы сделать кнопку сброса, но, с другой стороны, эта кнопка очень редко когда предусмотрена в дизайне. Да и данные в этом калькуляторе предназначены только для пользователя и не отправляются на сервер, а значит использование <form> будет тоже семантически неверным, ведь форма предназначена для отправки данных, а у нас никакие данные не передаются. Так что не все так однозначно...
  15. Да не за что. Я ведь вас только направил в нужное русло, остальное вы сделали сами 🙂 Ну а со стрелочкой самому интересно повозиться было 🙂
  16. Сильно в код не вникал, но в целом да. Сами видите насколько код меньше и чище получился 🙂
  17. Малость переделал стрелочку, теперь можно обойтись одним псевдоэлементом. А значит у вас из кода можно будет убрать .wrap и кружочки сделать с помощью второго псевдоэлемента для .block По поводу верстки - зачем вы все с помощью абсолютного позиционирования двигаете? Можно флексами обойтись. Код для стрелочки: <div class="box"></div> .box{ height: 100px; width: 200px; background: red; border-radius: 10px; position: relative; } .box:after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) rotateX(180deg); width: 40px; height: 50px; background-image: radial-gradient(at 100% 30%, transparent, transparent 79%, red 80%, red), radial-gradient(at 0% 30%, transparent, transparent 79%, red 80%, red); background-position: 20px; }
  18. Как вариант: <div class="box"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, velit non ipsa rem dolorum unde fuga repudiandae iusto nesciunt numquam dolores tenetur soluta ad in aut fugit ea tempora ipsum! </div> .box { width: 300px; background: red; border-radius: 10px; padding: 10px; position: relative; } .box:before, .box:after { content: ""; height: 35px; width: 20%; position: absolute; top: 100%; left: 50%; background: radial-gradient( at 25% 100%, transparent, transparent 75%, red 75%, red ); } .box:before { transform: translateX(-100%); } .box:after { transform: rotateY(180deg); }
  19. Я лишь привел пример :) Ну и, если честно, мне reset.css нравится, так как я могу быть 100% уверен что у всех элементов, во всех браузерах, стили будут одинаковыми и мне не придется учитывать особенности того или иного браузера. Если есть лучшие варианты - буду рад ознакомиться.
  20. reset.css, например, тоже сбрасывает margin и padding у всех элементов, но делает это только для тех тегов, у которых они есть. Заказчик, или контент менеджер, или кто там еще будет наполнять сайт, в большинстве случаев вообще не знают такие страшные слова как отступ у параграфа :) Да и в любом случае, для используемых тегов, все эти отступы будут переопределяться в стилях. А плохая практика это потому, что " * " задает стили именно для всех элементов, для каких надо и каких не надо. А потом в отладчике появляются всякие сбивающие с толку паддинги у боди :)
  21. AlexZaw

    height и bottom

    Потому что при адаптации может потребоваться изменить высоту. С помощью height заданного в процентах это легко сделать. При чем высота будет резиновой. А вот с помощью bottom это не получится. Ну и вторая причина - привычка задавать высоту с помощью свойства которое для этого предназначено, а не с помощью чего попало :)
  22. AlexZaw

    transition

    По хорошему нужно не ссылку ровнять, а именно выпадающее меню по ссылке
  23. AlexZaw

    document.querySelector()

    Возвращает "<h1>Hello World!</h1>". Проверьте подключение скрипта, он у вас срабатывает раньше чем построится DOM
  24. AlexZaw

    transition

    Да, но это, в принципе не критично и подойдет для большинства экранов.
  25. AlexZaw

    transition

    Ну если не считать фиксированных размеров, то да. Не учитываете наличие фона у ссылок который перекрывает псевдоэлемент. У псевдоэлемента задан z-index:-1; это означает что он находится "под" родителем. А так как у родителя задан непрозрачный фон, то псевдоэлемент просто не видно. А также особенностей отношений позиционированных элементов. Если элементу задано абсолютное позиционирование, то он смотрит на позиционирование родителя. Если у родителя позиционирование static, то берется родитель родителя и так далее пока не будет найден родитель с позиционированием отличным от static или поиск не дойдет до тега html. Если у всех родителей позиционирование не задано то отсчет позиции ведется от края окна браузера. Если позиционирование задано, то отсчет ведется от края родителя. Поэтому я так настойчиво и советую нормально изучить основы, при знании выше сказанного у вас бы не возникло этой проблемы.