WEB – NILX.ORG

メディアクエリ範囲指定の新構文

CSSのメディアクエリを比較演算子での指定に更新。

幅768px以上
- 旧　@media (min-width: 768px)
- 新　@media (width >= 768px)
幅768px未満
- 旧　@media (max-width: 767px)
- 新　@media (width < 768px)
幅768px以上1280px未満
- 旧　@media (min-width: 768px) and (max-width: 1279px)
- 新　@media (768px <= width < 1280px)

書きやすいし分かりやすい。width < 768pxは768px > widthでもいい。

対応が遅れていたSafariも2023年3月に対応した。
Media Queries: Range Syntax | Can I use

今指定している仕様。

font-family (混植)
- 和文フォントに游ゴシック、ヒラギノ
- 欧文フォントにSegoe UI
- 三点リーダに和文フォント
  - 欧文フォント指定で三点リーダが下付きになる対策
font-feature-settings: “palt”
- 読みやすい文字詰め
letter-spacing: .5px
- でも詰まりすぎなので少し空ける
- NotoSansでは空きすぎるのでPCのみに適用
text-shadow: 0 0 #(淡色)
- Winで游ゴシックが細くなる対策
word-break: break-all
- 要素の右端でのみ自動改行する

てがろぐの画像拡大表示にPhotoSwipe v5を使う。

動作サンプル(稼働中のてがろぐ)

のでStylusで消す。

article[data-card-title$="(吹替版)"],
article[data-card-title$="（吹替版）"] {
    display: none;
}

単純にカード名を取っているので、表記無しや字幕・吹替の両対応は消さない。

非公開モードで身内用SNSとして快適に運用中。
細かい問題とメンテは、

プッシュ通知が来ない
- 通知設定にプッシュ有効化のボタンが無い。β版インスタンスにはあるので更新を待つ。
iOSで撮った動画がPCやAndroidで再生出来ない
- Misskey同様。.movから.mp4に変換されない為。Calckeyで対応されるかは不明。とりあえずUP前にmp4に変換してもらう。
オブジェクトストレージ用サブドメインのSSL証明書更新
- 一旦手動更新したので以下に記録。次回自動更新に設定。