タグ

ブックマーク / web.w3g.jp (4)

  • script要素のdefer属性でパフォーマンスを向上|Web制作 W3G

    Updated 2013.10.15 / Published 2013.10.15 DOM構築が完了した時点でスクリプトを実行したいというタイミングは活用どころがとても多いのですが、2013年9月時点の最新ブラウザシェアを見てもInternet Explorer8以下が未だに25%以上もいることから、IE9からサポートしているDOMContentLoadedは使い難く、未だにイベントハンドラのonload属性やwindow.onloadといった画像の読み込みまで含めてしまうパフォーマンスの悪いタイミング操作でスクリプトの実行を行っている制作者は多くいるようです。 そこで、レンダリングができた時点で、スクリプトが実行されるようにUAに指示するための属性であるscript要素のdefer属性を紹介します。defer属性の付いたスクリプトファイルの実行は、DOMContentLoadedの前に行

    script要素のdefer属性でパフォーマンスを向上|Web制作 W3G
    kadoppe
    kadoppe 2019/12/02
  • 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はややこしい
  • CSSで計算式を可能にするcalc()ファンクション

    Updated 2014.03.23 / Published 2013.10.28 CSS3にcalc()というファンクションがあるのをご存知ですか?CSSにおいて計算式を可能にしてくれる便利なcalc()ファンクションのサポート状況や使い方について紹介します。 「横幅にパーセンテージ値を用いつつ、その横幅から指定ピクセル(px)分だけ引けたら...」こんなことを思われたことがあると思います。それをCSS拡張メタ言語を使うわけでもなく、CSS単独で実現できてしまうのがcalc()ファンクションです。 参考:Mathematical Expressions: 'calc()' calc()ファンクションの実装状況 IEIE9よりサポート ChromeChrome19より25まで-webkit-のベンダー識別子付きで先攻実装 Chrome26よりサポート FirefoxFirefox4より15

    CSSで計算式を可能にするcalc()ファンクション
  • HTML5についてのおさらい|Web制作 W3G

    Updated 2010.07.29 / Published 2010.07.29 これからHTML5を使いはじめようという方に向けたHTML5のおさらいです。HTML5の記述方法にはじまり、導入にあたって間違いやすいところや勘違いしがちなところをまとめてあります。 hgroup, header, footer要素の説明を含めた続きもあります(続HTML5についてのおさらい)。 HTML5の記述方法 まず最初に、必ずDOCTYPE宣言を行います。HTML5には公式のDTDがないので、すごくシンプルになっています。 <!DOCTYPE html> 続いて、html要素にドキュメントの言語を宣言します。 <html lang="ja"> そして順番にhead要素ときて、文字エンコーディングの指定ですが、charset属性が新たに利用できるようになりました。 <meta charset="UTF

    HTML5についてのおさらい|Web制作 W3G
  • 1