ブックマーク / zenn.dev/catnose99 (2)

  • iOSブラウザで快適に書けるエディターを作るの大変すぎ問題

    iOSのブラウザ(Safari、Chromeなどなど)で体験の良いWYSIWYGエディタを作るのは無理ゲーである。色々と理由はあるが、いちばん辛いのはバーチャルキーボード(オンスクリーンキーボード)を表示したときの挙動だと思っている。 キーボードが表示されているときにposition: fixedが効かない WYSIWYGエディタではテキストの装飾や画像挿入などのボタンを画面のどこかに固定したくなることが多い。 しかし、iOS Safariではキーボードが表示されているときにposition: fixedなどのCSSだけで画面上に何かを固定させることが難しい。 position: fixedとbottom: 0 やtop: 0を使っても要素が画面に固定されない仕様となっている(これはposition: stickyにしても同じ)。 ワークアラウンドも上手く動かない noteやscrapbo

    iOSブラウザで快適に書けるエディターを作るの大変すぎ問題
    yarumato
    yarumato 2023/12/22
    “iOSブラウザ(Safari)で体験の良いWYSIWYGエディタは難しい。バーチャルキーボード表示時、要素が画面固定されない。大手なら力技で対応できるが、少人数だと「ネイティブアプリで or WYSIWYGエディタをやめる」しかない”
  • 絵文字をファビコンとして表示する簡単な方法

    2021/5/17追記 2021年5月現在、Safariではこの方法に対応していません。Safari用に別途ファビコンを用意する必要があります。 ちょっとしたWebサイトを作るときに地味に面倒なのがファビコンです。わざわざ画像を作るのも、どこかからちょうど良い画像素材を持ってくるのも、アップロードするのも面倒だったりします。 そんなときは絵文字をファビコンとして使いましょう。 やり方 先にやり方を載せておきます。これをHTMLの<head>の中へコピペすればファビコンとして絵文字が表示されます。 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text x=%2250%%22 y=%2250%%22 style=%

    絵文字をファビコンとして表示する簡単な方法
    yarumato
    yarumato 2021/05/14
    “ブラウザChrome、Firefox、Safariでは、ファビコンにSVG形式の画像を使えます。SVGの中に文字を含めるには<svg>の直下に<text>を配置します。絵文字以外の文字、漢字などもSVGに埋め込みできます”
  • 1