19 komentářů k článku Na co se zapomíná a o čem se moc nemluví na webovém front-endu:

  1. jaahoo

    Pěkný
    Článek pěkný a nováček se určitě dozví něco nového. Já osobně jsem vše víceméně znal. Pár bodů:

    • Nikdy jsem nebyl příznivec clearfixu vždy mě to přišlo takové…
      nečisté a taky moc rád využívám :after/:before. Začal jsem tedy
      používat na rodiče overflow:hidden (když vím že mi to nebude vadit) a
      zatím jsem s tím větší problémy neměl.
    • S těmi nth-childy u IE8 bych
      radši použil selectivizr.com je to strašně návykové a je škoda
      se omezovat jen kvůli IE.
    • Border radius jsem trošku nepochopil, pokud
      to chci kulaté tak dám border-radius: 100% ne? =)
    • To omezení počtu selectorů u IE je pěkná „vlastnost“. Člověk se s tím moc často nesetká (já osobně jen jednou) ale je dobré to vědět, protože pak jen člověk sedí, čumí a neví =)

    Jinak něco jako tenhle článek ale ve videu: http://www.confreaks.com/videos/3360-railsconf-front-end-fun-not-frustration

    A pak hrátky s border-radiusem: https://www.youtube.com/watch?v=JSaMl2OKjfQ&feature=youtu.be

    PS: je možnost někde stáhnout to testovácí PSD?

  2. vaclav.sir

    Border aktivního prvku

    • 4095 selektorů je ve skutečnosti 4095 pravidel. Což vypadá mnohem hůř, ale zase je to per-sheet.
    • Nesouhlasím s potlačením zvýraznění focusovaného prvku. To zvýraznění má svůj důvod. Když už to tolik vadí, tak bych byl spíš už pro this.blur() při té akci, ale pokud se to má udělat dobře, tak to není úplně jednoduché (prvku je potřeba nastavit tabindex=1 a při focusu kteréhokoli prvku ho nastavit zpět na jeho původní hodnotu).
  3. Nikdo

    button bez cursor:pointer
    ad. button bez cursor:pointer
    V principu nevadí, když button nemá pointer, jen je třeba to tak mít cíleně a ne na to zapomenout u jednoho tlačítka z deseti.
    Třeba Google má u skoro všech tlačítek natvrdo default, stamiliony lidí to používají a nikdo v tom problém nevidí, někde dokonce nemají ani hover verzi (např. odhlášení).

    A nejde jen o Google. I MS pointer nepoužívá úplně všude (třeba v emailu).

  4. iiic

    article a aside, a mezi nimi je čára…
    „dvousloupcový layout, article a aside, a mezi nimi je čára“ bych řešil asi ještě jinak, bez elementu pro čáru… přeci jen by to byl prázdný element, které pochopitelně žádnou obsahovou hodnotu nenesou a o vzhled se má starat css, nikoliv html.

    Takže tady by šlo dát to jako border a to oběma jak pro article, tak pro aside, prvnímu zprava, druhému z leva a (třeba) ten druhý posunout pomocí záporného margin o šířku čáry doleva. Tím budou obě čáry na sobě a vizuálně budou vypadat jako jedna dlouhá stejně, jako nejdelší element.

    1. xerno

      Re: article a aside, a mezi nimi je čára…
      Take reseni, ale neuplne. Za predpokladu promenne sirky v dnesni responzivni dobe zaporny margin posune cely prvek a zprava bude kus prazdneho mista. Radeji bych to resil position relative na rodici a absolute na detech, kde oba pritisknu ke sve strane, dam top:0, podle potreb sirku – treba 79% a 20% s tim, ze border bude mit 1%. Tim se ramecky take prekryji. Reseni s pevnou sirkou cary nebo jednoho z prvku jsou na podobnem principu, akorat by se jednomu z prvku nastavil fixni pozitivni margin. Reseni pomoci JS povazuji za velmi nestastne, predevsim kvuli performance. Hlavne pri te promenne sirce by byl treba event window.onresize.

  5. Ondřej

    Řešeníuváděného příkladu
    Docela by mě zajímalo, jaké řešení jste měl na mysli u toho příkladu s dvou sloupcovým layoutem, kde se dělící čára natahuje dle delšího sloupce. Jsem to zkoušel a nedaří se. Mohl bych vidět ukázku kódu?

    Díky

    1. Petr UrbánekAutor příspěvku

      Re: Řešeníuváděného příkladu
      Řekl jsem si, že nebudu nikomu nic vyvracet nebo se hádat s tím, že mám pravdu, protože přece jen psaným způsobem se věci vysvětlují hůře, ale, pokusím se aspoň na toto odpovědět…

      Jedno z řešení by mohlo být třeba:

      <div class="content">
           <article></article>
           <aside></aside>
           <i class="hr">
      </div>
      

      .hr může být buď takto a nebo přes :after / :before ale pro lepší ilustraci dávám takto :)

      .content bude mít position:relative a bude mít nějaký clearfix (kvůli floatnutým article a aside), uvnitř bude article i aside floatnut každej na jinou stranu s nějakým % nebo pevnýma px, to je podle toho zda řešíme nějaký pevný layout nebo responsive.
      No a .hr bude mít position:absolute a width:100% a pak už jen top:0 a left, tak aby sednul mezi article a aside, ideálně něco jako left:50% a margin-left:200px, třeba, to už je o tom spočítat si to dle layoutu. No a už mu dám třeba jen width:2px a background:#000 a mělo by být hotovo, co myslíte? :)

      1. Petr UrbánekAutor příspěvku

        Re: Řešeníuváděného příkladu
        omlouvám se, i když jsem to kontroloval asi 3x, tak stejně chybka…

        „No a .hr bude mít position:absolute a width:100%“

        správně má být: né width:100% ale height:100% aby to mělo výšku dle .content

  6. Ondřej

    Řešení uváděného příkladu
    Jo, děkuji. Po vysvětlení je řešení celkem jednoduché. Zase jsem se něco přiučil.

  7. Radek Tůma

    Velikost fontu rem vs. px
    Nemohl byste přesně vysvětlit, co který řádek dělá? Aby se mi to podařilo pochopit, tak jsem to kompiloval do CSS, ale kompilátor zahlásil @font-size is udefined.

    1. Petr UrbánekAutor příspěvku

      Re: Velikost fontu rem vs. px
      omlouvám se, takto vypadá ten mixin správně…
      takhle už by to mělo fungovat v pořádku :)

      .font-size(@font-size: 16, @line: 1) {
          @rem: (@font-size / 10);
          font-size: @font-size * 1px;
          font-size: ~"@{rem}rem";
          line-height: @line;
      }
      
      1. Radek Tůma

        Re: Velikost fontu rem vs. px
        Děkuji. Co přesně dělá řádek font-size: ~“@{rem}rem“;? Tomu jedinému nerozumím, v LESS teprve začínám. Děkuji.
        Radej Tůma

        1. Petr UrbánekAutor příspěvku

          Re: Velikost fontu rem vs. px
          dělá to, že velikost font-size v PX přepočítá na rem… takže vygeneruje pod sebe prvně PX pro IE a pod to REM pro novější prohlížeče

          1. Radek Tůma

            Re: Velikost fontu rem vs. px
            Mě šlo o ten konkrétní řádek, proč tilda, proč rem ve složených závorkách, co to je za konstrukci. Možná by to šlo i takto zkrátit:

            zdrojový kód
            

            font-size(@font-size: 16, @line: 1) {
            font-size: @font-size * 1px;
            font-size: (@font-size / 10)*1rem;
            line-height: @line;
            }

  8. renne
    • { /* univerzální selektor – platí pro všechny elementy na stránce */
      margin:0;
      padding: 0;
      }

    body {
    background: rgb(152,152,152);
    }

    .menu ul { /* nastavení celé oblasti navigace /
    width: 175px;
    margin: 10px;
    list-style-type: none; /
    odstranění znaku odrážek z navigace */
    }

    .menu li { /* nastavení jednotlivých položek seznamu */
    margin-bottom: 10px;
    }

    .menu a { /* nastavení jednotlivých odkazů /
    display: block; /
    převedení odkazu na blokový element – tím se odkaz roztáhne přes celou šířku položky li */
    height: 21px;
    background: url(menu_back.jpg) top;
    padding: 7px;
    color: #000;
    font-size: 105%;
    font-weight: bold;
    text-decoration: none;
    transition-property: background; /* plynulá animace pozadí /
    transition-duration: 1s;
    border-radius:25px 25px 0px 0px; /
    časové nastavení plynulé animace /
    }
    .menu a:hover { /
    nastavení odkazu po najetí myši */
    color: rgb(255,0,0);
    background: url(menu_back.jpg) bottom;
    padding-left: 15px;
    }

Napsat komentář

Tato diskuse je již příliš stará, pravděpodobně již vám nikdo neodpoví. Pokud se chcete na něco zeptat, použijte diskusní server Devel.cz

Zdroj: https://www.zdrojak.cz/?p=13581