Jump to content
  • 0

Пустой список на псевдоэлементах

Kray Storm

Asked by Kray Storm,

 Share

Question

Kray Storm Explorer

Kray Storm

Posted
Posted

Здравствуйте.

Решил после теории попробовать силы и помучить "Практикум" на сайте.

Задание 3 "Вложенные списки".

06.png

Понятно, что решение просто и очевидно.

Но тут внезапно(!) возник синдром "Мы не ищем легких путей" и тяга к "Великой оптимизации".

Идея в том, что в html мы не вписываем вручную однотипные наименования пунктов и однотипную нумерацию. А просто используем :before и after. Что как бы более соответствует прекрасной идее - "HTML создается только раз и дальше все редактируем только через CSS".

Собственно, код.

Внешне все выглядит также, как на html-списках и валидно.

Вопрос:

1. Есть ли какие-то подводные камни в таком подходе - почему он может быть плох? Старые IE не считаем.

2. И... где такое можно/нужно использовать в реальности? :)

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0
sammasati Explorer

sammasati

Posted
Posted

Такой подход плох тем, что ты перепутал всё, а именно, используешь стили для создания контента. Всё должно быть наоборот — html задает логическую структуру документа и контент, а css наводит во всём этом красоту. У тебя же получился какой-то шаблонизатор на css :)

Ну и плюс к этому, зачем усложнять себе работу, если можно всё это сделать на html быстро и просто?

И ещё у тебя теряется семантика html-кода.

Link to comment
Share on other sites
  • 0
Kray Storm Explorer

Kray Storm

Posted
  • Author
Posted (edited)

На счет семантики, потери сути html/css и усложнении - это да.

Потому и спросил, что способ вроде такой есть, а что с ним делать - непонятно.

Edited by Kray Storm
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • Xandr555
      Как подогнать css под Safari 5 и IE-11
      By Xandr555
      Добрый день. Размещено 2 блока по 3 изображения, отцентрировано flex, по плану при наведении курсора картинка затемняется, сверху появляется описание. Стили работают как задумано только в Chrome и Opera. В Сафари рамка не всплывает, текст не выравнивается. В IE 11 рамка всплывает, текст не выравнивается. Заранее благодарю.
      <div class="wrapper"> <div class="demo-content"> <div class="part"> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample54.jpg> <figcaption><section class="imgone">По Вашему желанию электропроводку можно уложить в ПВХ-короб</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample73.jpg> <figcaption><section class="imgone">Красиво, эстетично и надежно - наше кредо!</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample58.jpg> <figcaption><section class="imgone">Такой вариант электропроводки рекомендуем, например, в подсобных постройках</section></figcaption> </figure> </div> </div> </div> <div class="wrapper"> <div class="demo-content"> <div class="part"> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample54.jpg> <figcaption><section class="imgone">Вмонтированный в стену электросчетчик делает Вашу квартиру более объемной</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample73.jpg> <figcaption><section class="imgone">Устанавливайте новые светильники, мы поможем подобрать их по мощности</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample58.jpg> <figcaption><section class="imgone">Мы устанавливаем розетки и выключатели в любой компоновке</section></figcaption> </figure> </div> </div> </div> *, *:after, *:before { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; } .wrapper{margin:0 auto} .demo-content { text-align: center; } .part{max-height:310px;max-height:100%;display:flex;display:-moz-flex;display: -webkit-flex;justify-content:center} figure.img-box { text-align: center; position: relative; display: inline-block; overflow: hidden; margin: 3px 3px; max-width: 300px; width:100%; background-color:#DCDCDC; -webkit-box-shadow: 0 8px 17px 0 hex(#cccccc), 0 6px 20px 0 hex(#cfcfcf); box-shadow: 0 8px 17px 0 hex(#cccccc), 0 6px 20px 0 hex(#cfcfcf); } figure.img-box * { -webkit-box-sizing: padding-box; box-sizing: padding-box; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } figure.img-box img { max-width: 100%; vertical-align: top; } figure.img-box figcaption { position:absolute; top:0; bottom:0; left:0; right:0; align-items:center; z-index:1; display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; flex-direction:column; -webkit-flex-direction:column; -moz-flex-direction:column; -ms-flex-direction:column; justify-content:center; opacity:0; } figure.img-box:after { border: 8px solid #FF0000; position: absolute; content: ""; display: block; top: 50%; bottom: 50%; left: 0; right: 0; -webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; opacity: 0; } figure.img-box:hover img { opacity:0.2; } figure.img-box:hover:after { top: 0; bottom: 0; opacity: 0.9; } .img-box .imgone { font-family:'Roboto',sans-serif; color:#00008B; font-size:16px; font-weight: 400; margin: 0; padding:0 10px; transform: scale(0); -webkit-transform:scale(0); -ms-transform:scale(0); -webkit-transition: all 1s ease 0s; transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; } .img-box:hover figcaption, .img-box:hover .imgone { transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); opacity: 1; } скриншоты прилагаю



    • Velidan
      отменить смещение текста при list style position inside
      By Velidan
      Доброго дня уважаемые коллеги, подскажите пожалуйста, можно ли как-то отменить смещение текста при переносе строки под маркер списка при позиции inside? 
      (Можно только при позиции inside).  буду благодарен за любую помощь.
       
      https://jsfiddle.net/shaoau5z/
    • Johnney
      Непонятная область блока
      By Johnney
      Приветствую!
      Интересная штука. Когда водишь мышью над третьим пунктом меню (Logout), попадается непонятная невидимая область, принадлежащая второму пункту (Gallery). И она довольно большая. Это хорошо видно по ховер эффекту изменения цвета иконки второго пункта. Такое действо происходит в Хроме, Опере, Сафари. А в Фаерфоксе - нет.
      Что это?
       
      http://tellmeof.cc.ua/DarkVertMenu/darkvertmenu.html
    • parabola
      Выровнить текст в списке относительно маркера
      By parabola
      Привет!
      Как выровнить текст в списке относительно маркера.
      http://jsfiddle.net/KstMK/


×
×
  • 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

  I accept