タグ

ブックマーク / hyper-text.org (6)

  • CSS で計算(四則計算)が行える calc() 関数を使ってみよう

    CSS プロパティに指定する値を計算式で書くことができる仕様、calc() 関数について、具体的なサンプルソースをそえて解説してみたいと思います。 CSS の calc() 関数は、CSS プロパティに指定する値を計算式で書くことができる仕様です。 ちょっと前に Firefox 48 が、この calc() 関数の入れ子表記に対応した件で下記のような記事を書いたのですが、その時参考にリンクを張ろうとした、過去に calc() 関数についての解説を書いた記事がもう6年も前の記事で、さすがに古すぎるということでリンクを張れなかったんですが、いい機会なのでちょっと書き直してみます。 Firefox 48 は CSS calc() 関数の入れ子に対応、CSS カスタムプロパティとの併用がより便利に なお、上記記事でも書いたとおり、calc() 関数は現時点で IE (IE11)や Edge を始め

    CSS で計算(四則計算)が行える calc() 関数を使ってみよう
    Rockridge
    Rockridge 2016/05/29
    「CSS プロパティに指定する値を計算式で書くことができる仕様、calc() 関数について、具体的なサンプルソースをそえて解説」した記事。calc() 関数は現時点でほぼすべてのモダンブラウザがサポートしているという。
  • Firefox 48 は CSS calc() 関数の入れ子に対応、CSS カスタムプロパティとの併用がより便利に

    CSS の calc() 関数は、サイズや形状を決定する値の指定を計算式で書くことができる仕様で、現時点では IE (IE11)や Edge を始め、Firefox、Chrome、Safari など、ほぼすべてのモダンブラウザがサポートしています。 8.1. Mathematical Expressions: calc() : CSS Values and Units Module Level 3 ちょっとした計算を簡単に書けるので私もよく使用する記述なのですが、現在、Beta リリースの Firefox 48 は、この calc() 関数の入れ子記述に対応しました。後述しますが、CSS Variables (CSS カスタムプロパティ) と組み合わせるときにかなり便利になりました。 968761 - Support nested CSS calc() calc() 関数の基的な記述 例

    Firefox 48 は CSS calc() 関数の入れ子に対応、CSS カスタムプロパティとの併用がより便利に
    Rockridge
    Rockridge 2016/05/24
    CSS Variables(CSSカスタムプロパティ)によるオリジナルプロパティをcalc() 関数を使って定義しておき、calc() 関数内で呼び出すようにすると、「様々な条件に合わせた指定が比較的簡単に書けてしまう」。
  • Firefox 36 が unicode-range デスクリプタをサポート、文字コード範囲を指定してフォントを適用可能に

    現在、Firefox Nightly としてリリースされている、Firefox 36 で、unicode-range デスクリプタがサポートされました。unicode-range は @font-face デスクリプタで、読み込んだフォントの適応範囲を指定します。 例えば、ある要素内のテキストのうち、特定の文字のみ、あるいは特定の文字コード範囲に含まれる文字のみを、別のフォントで置き換えたい場合などに、unicode-range でその文字や文字コード範囲を指定することができます。 4.5 Character range: the unicode-range descriptor - CSS Fonts Module Level 3 Editor's Draft 27 October 2014 unicode-range デスクリプタの使い方 こういう指定が妥当というか実用的かは別として、

    Firefox 36 が unicode-range デスクリプタをサポート、文字コード範囲を指定してフォントを適用可能に
    Rockridge
    Rockridge 2014/12/25
    unicode-rangeを使うと、「ある要素内のテキストのうち、特定の文字のみ、あるいは特定の文字コード範囲に含まれる文字のみを、別のフォントで置き換え」ることが可能になる。
  • HTML5 が勧告案 (Proposed Recommendation) に。DataCue / Drag and drop は仕様から削除

    HTML5 が勧告案 (Proposed Recommendation) に。DataCue / Drag and drop は仕様から削除 HTML5 仕様が、2014年 9月 16日をもって勧告案 (Proposed Recommendation) として公開されました。At risk 扱いだった、「DataCue」 および 「Drag and drop」 は削除。「input type="time"」、「ruby 関連要素 (新仕様)」 は仕様に残されました。 2014年 6月 17日付けで一旦、最終草案 (Last Call Working Draft) に差し戻されていた HTML5 仕様ですが、2014年 9月 16日をもって勧告案 (Proposed Recommendation) として公開されました。 At risk 扱いだった、「DataCue」、「input type

    HTML5 が勧告案 (Proposed Recommendation) に。DataCue / Drag and drop は仕様から削除
    Rockridge
    Rockridge 2014/09/21
    HTML5の勧告案において、At risk扱いだった「ruby 関連要素 (新仕様)」 は仕様に残されたとのこと。
  • Chrome などで保存したパスワードが丸見えだから危険とか言われている件について

    Google Chrome では設定画面からブラウザに保存してあるパスワードを簡単に見ることができて危ないっていう件について誤解されていそうな点をまとめてみたいと思います。 ソフトウェア開発者の Elliott Kember 氏が自身の Blog に「Chrome's insane password security strategy」 というタイトルで指摘する記事を書き、日ではギズモード・ジャパンで翻訳記事が上がったことで話題になった、「Google Chrome では設定画面からブラウザに保存してあるパスワードを簡単に見ることができて、マスターパスワードの設定もないから危ない」 っていう件。 Chromeでは自動保存のパスワードが丸見え。サーッと血の気が引いたわ : ギズモード・ジャパン Chromeブラウザの「パスワード丸見え」問題にGoogleが釈明 : ITmedia ニュース

    Chrome などで保存したパスワードが丸見えだから危険とか言われている件について
    Rockridge
    Rockridge 2013/08/14
    論点が整理された良記事。ただ、パスワードを簡単に保管できる仕組みを提供しながら、自己責任を強調するGoogleの主張には違和感を感じる。多数のユーザーが盗み見対策を望んでいるなら、何らかの対応があるべきでは。
  • Fullscreen API を簡単に試してみた

    Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API ですが、お勉強ついでに簡単に試してみました。 ちょっと前、先月の話題になってしまうのですが、Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API に関連して、Mozilla が公開している Gecko:FullScreenAPI が更新されて Firefox Nightly で使えるようになったり、W3C からも Fullscreen (Editor's Draft) が公開されたりと色々動きが活発になってきましたので、いい機会ということで、お勉強ついでに簡単に試してみました。 例えば HTML5 で追加された video 要素は、今まで Flash などのアドオンに頼ってきた動画の Web ページへの埋め込み、再生を HTML 側で対応することを可能にしましたが、

    Fullscreen API を簡単に試してみた
    Rockridge
    Rockridge 2011/11/26
    Gecko:FullScreenAPIを具体例やデモを交えて解説している。フルスクリーンはWebアプリに必須の機能としてMozillaが力を入れている部分。
  • 1