https://gyazo.com/7261fb8e8326bd2467a4ae064b1e650a
セットアップ時につくられた extenstions.jsのソースが見づらい
getWebViewContent
コンパイルしたCSSを読み込んであげる
導入した記事がまったくなかったので調査と対応に時間がかかってた
開発体験が良くなった
OMOKEN -LAB（オモシロイコト研究所）代表
Webでアイコンを表示する方法
画像ファイルをimgで読み込む
background-imageで画像指定
仕組み
svgのようなベクターデータが固有の文字コードにマッピングされている 文字が割り当てられてない領域があってそこにアイコンフォントに入れていることがある
Praivate Use Areaは6万時以上登録可能
１年前にドラフトで公開されてた
ある要素を基準に表示位置を固定できる機能
使い方
AnchorとBoatの記述位置はどこでもOK
兄弟子孫の縛りはない
Anchorを定義する
anchor-name
anchor属性
固定する一を決める
固定要素をページレイアウトの外にする
position: absolute, fix
Anchor()を使ってポジションを決める
すごいところ
アンカーに合わせて固定要素を画面内に収まるように設置してくれる
固定要素にpostion-anchorプロパティを指定する @postion-tryルールを追加する
フォールバックの記述をしていく
メイソンリー
石畳・石積・レンガ
CSSの世界において
レイアウトを指す
グリッドが近い
レイアウトの採用したサービス例
画像サービスはアスペクト比が一定じゃないので向いているかもしれない 今までのこと
配置が縦並びのときに表現できる
画像でも機能はする
要素は縦方向に流れる
grid-template-rows: masonry;
ブラウザ対応がまだおいついてない
これからのこと
CSS Grid Layout Module Level 3 Editor Draft
span
masonry-auto-flow
nextを指定すると順番に積み重なって並んでいく
AppleはGridの一部にすべき
gridが複雑になりそう
ウォーターフォールでもいいんじゃないの
Gridに扱うのは間違い
課題自体は解消したい
display: masonryでどうだろうか
動的な変化のため事前レイアウトが必要
subgridも合わさったら大変
SassでやっていたFunctionsやMixinsなどの関数をCSS内に書こうという提案 議論は紛糾してる
layerとscopeどうすんねん
Mixinsの上書きをどう扱うのか難しい
パフォーマンスの問題点
2017年に@applyで提案したが破却された
予想される問題
コンポーネント化するのかMixinsにするのかの基準が難しそう
パーツの装飾として定義するのか
レイアウトの計算をFunctionsでやるのか、JavaScriptにするのか
インフラチームでのフロントエンドエンジニアが少ない背景
コンソールをつくる
Web SDK化しよう
必要なものをSDKにして配りたい
UI共通化
NextUI v1がアルファ版だった
互換のあるUIライブラリを使おう
CSSゴリゴリはインフラの人が使いこなせないのでは
サイドバー・ヘッダー・メイン・ポップオーバー
CSSのリセット初期化機能
コンパイルすると１つのCSSファイルになる
クライアントサイドで読み込むと初期化と正規化が２回走る
非同期通信になって詳細度バトルで敗北して上書きになる
結局無効化することに
classNameの衝突
themeをextendできなくなった
extendしたclassNameしか使えない
CSS3D ライブコーディング(仮)