タグ

ブックマーク / w3g.jp (3)

  • word-breakとword-wrapはややこしい

    Updated 2015.01.13 / Published 2015.01.13 word-break:break-all;は一切の禁則処理を解除し、どの文字の間でも改行するため、単語の途中や括弧の直前・直後で折り返したり、句読点が行頭にきてしまうことなどがあることから折り返しの制御には好ましくないとされています。望ましい折り返しの制御をしてくれるword-wrap:break-word;(overflow-wrap:break-word;)の用法について紹介します。 折り返しを制御する2つのCSSプロパティ 幅の狭い領域で長い英単語や長いURLの途中で折り返しを制御できるCSSプロパティは、特にスマートフォンなどの小さなディスプレイサイズ向けへの対応を考慮してよく用いられるようになってきています。ただし、CSS3には折り返しを制御できるCSSプロパティが2つ存在し、とてもややこしいので

    word-breakとword-wrapはややこしい
    raimon49
    raimon49 2016/04/08
    word-wrap:break-word; (overflow-wrap:break-word;)が効かないケース。
  • Ajax(pjax)遷移時におけるSNSボタン再構築

    Updated 2013.10.04 / Published 2013.10.04 HTML5のhistoryAPI(pushState)とAjaxを組み合わせた遷移(pjax)時に、Twitterのwidgets.jsで埋め込んだツイートボタンが更新されない事態に遭遇しました。pushStateでURLは変更できているにも関わらず、ツイートボタンを押しても取得されるタイトルとURLは最初にツイートボタンを表示したときの遷移前の状態であり、ごっそり入れ替えてもDOMが再構築されていない様子。 TwitterAPIドキュメントを探すも、Ajax遷移時にDOMを再構築させるような使い方はどこにも載っていない。そこで、検索語を「Tweet button Ajax」に変えてみると、Cannot update tweet button with AJaxという記事がヒット、回答欄に解決策を提示して

    Ajax(pjax)遷移時におけるSNSボタン再構築
    raimon49
    raimon49 2015/07/09
    生成された埋め込みコードを中身を見てクライアント側ページから初期化コードをフックしなきゃいけない。何だか本末転倒感が(しょうがないのだけど)。
  • ホイール系イベント2014年版クロスブラウザ

    Updated 2014.10.15 / Published 2014.03.04 ホイール系のイベントは各ブラウザの実装がバラバラでクロスブラウザ対策に苦労するイベントのひとつとして知られているでしょうが、Document Object Model Level 3 Eventsにより標準化されたwheelイベントが多くのブラウザで実装されてきています。エントリーでは現状のホイール操作時の各イベントについて、クロスブラウザでフォールバックしながら用いる方法を解説していきます。 ホイール系イベント比較 DOMMouseScroll, MozMousePixelScroll DOMMouseScrollイベントとMozMousePixelScrollイベントはどちらもGecko 固有のため、現存ではFirefoxしかサポートしていないイベントです。DOMMouseScrollはスクロールする

    ホイール系イベント2014年版クロスブラウザ
  • 1