ブックマーク / myakura.hatenablog.com (3)

  • Chromeでボタンをクリックしたときのフォーカスリング - fragmentary

    geckotangが「Chromeでボタンをマウスでクリックしたときにフォーカスリングが出たり出なかったりするのなんで」と言っていて、なんかお前調べろよ的な感じだったので調べることにした。 使うのはcs.chromium.org。<button>なので"HTMLButtonElement"で検索して、それっぽいファイルを探す。あった。 html_button_element.h "focus"で検索するとSupportsAutoFocus()というメソッドが見つかる……がこれはautofocus属性の対象になるかとかそういう感じがするのでこれではない。というかそっか、autofocus指定できるんだ……<input>にしか使ったことなかったからなんか使えないって思ってしまってた。 HTMLButtonElementにはなさそうなので、参照しているHTMLFormControlElement

    Chromeでボタンをクリックしたときのフォーカスリング - fragmentary
    yoshiko_pg
    yoshiko_pg 2018/04/10
    “背景とborder関連プロパティ(border-image, border-radius含む)が変更されたら、そのコントロールにスタイルがあたってると認識され、マウスクリック時でもフォーカスリングが当たるようになる” へぇーーー
  • するするさせたい:サイボウズ採用情報のアニメーション(その2) - fragmentary

    サイボウズの採用情報ページにあるアニメーションがするするしていない。ので前回は何がおこってるのか見てみた。 今回はするするさせられないか、がんばってみる。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションを止める まず、いまのjQueryベースなアニメーションを止める。 コンソールに以下をぶっこめばアニメーションが止まって、背景も初期位置に戻る。 jQuery('.icon').stop().css('backgroundPosition', '') チェーンもできるしjQueryべんりだね。 CSSアニメーションにしてみる jQueryのアニメーションを別の方法に書き換えるわけだけど、今は2010年代も後半だ。使うならCSSアニメーションしかない。とくに右から左へ一方向って

    するするさせたい:サイボウズ採用情報のアニメーション(その2) - fragmentary
    yoshiko_pg
    yoshiko_pg 2016/05/13
    ためになりすぎる
  • するするさせたい:サイボウズ採用情報のアニメーション(その1) - fragmentary

    サイボウズの採用情報ページを見ていた。 サイボウズ | 採用情報(新卒・キャリア) といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。 というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションの実装を調べる あとのことを考えて、Chrome DevToolsを使う。 まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div

    するするさせたい:サイボウズ採用情報のアニメーション(その1) - fragmentary
    yoshiko_pg
    yoshiko_pg 2016/05/13
    ためになる
  • 1