タグ

ブックマーク / kudakurage.hatenadiary.com (3)

  • Mobile Safariで最後の1文字が改行されてしまうバグ - くらげだらけ

    スマートフォンブラウザ関係のバグは(Android browserを中心に)たくさんありますが、今回はかなりレアケースなバグの話と回避方法についてです。 タイトルどおり、iPhone/iPadのmobile safariやWebViewで日語文字列の最後の1文字が不自然に改行されて表示されてしまうバグなのです。 どういうことかというと↓下のように表示されるということです。 くだくら げサンプルページも作りましたので、以下のページをiPhone, iPadで表示してみてください。 Sample: http://kudakurage.com/test/mobile_safari_line_break/ 発生条件 発生条件は少し複雑なため、そんなに遭遇することはありません。 (ただその分googleで検索しても、遭遇した例など出てきません) mobile safariで閲覧している PCブラウ

    Mobile Safariで最後の1文字が改行されてしまうバグ - くらげだらけ
  • CSS Flexible Box Layout Moduleで均等幅にレイアウトする - くらげだらけ

    最近ではベンダープレフィックスも無くす方向に向かっているようですね。 数年前に比べればCSS3プロパティも使えるような状況になってきているような気がします。いや気がしているだけかもしれません。 まぁ、現状webkitが支配しているモバイルブラウザ環境ではCSS3だって使えますしね。 display: box 横幅を均等に分けてレイアウトしたいみたいなときにFlex boxは便利なプロパティですが、どんな感じにするのがいいのかを書いてみようと思います。 Flexible Boxの仕様はころころ変わってて、最初は「display: box」最新は「display: flex」だったりしますが、まずは「display: box」でやってみます。 http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/ <div class="flex-box"> <

    CSS Flexible Box Layout Moduleで均等幅にレイアウトする - くらげだらけ
    kathew
    kathew 2017/02/09
    flexbox下ではwidht:100%で均等幅。覚えておこう
  • CSSのみでテキストにグラデーションやリフレクトをかけるテクニック(ちょっと更新) - くらげだらけ

    前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー(colorプロパティ)にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体

    CSSのみでテキストにグラデーションやリフレクトをかけるテクニック(ちょっと更新) - くらげだらけ
  • 1