ElementInternals and Form-Associated Custom Elements
In Safari Technology Preview 162 we enabled the support for ElementInternals and the form-associated custom elements by default. Custom elements is a feature which lets web developers create reusable components by defining their own HTML elements without relying on a JavaScript framework. ElementInternals is a new addition to custom elements API, which allows developers to manage a custom element’
今ã©ãã®å…¥åŠ›ãƒ•ã‚©ãƒ¼ãƒ ã¯ã“ã†æ›¸ãï¼ HTMLコーダーãŒãŠã•ãˆã‚‹ã¹ãinputã‚¿ã‚°ã®æ›¸ãæ–¹ã¾ã¨ã‚ - ICS MEDIA
ã¿ãªã•ã‚“ã€å…¥åŠ›ãƒ•ã‚©ãƒ¼ãƒ を制作ã™ã‚‹éš›ã€ã©ã®ã‚ˆã†ãªæ–½ç–ã‚’ãŠã“ãªã£ã¦ã„ã¾ã™ã‹ï¼Ÿã€€å…¥åŠ›é …目を見直ã—ãŸã‚Šã€å…¥åŠ›ã‚¹ãƒ†ãƒƒãƒ—を明確ã«ã—ãŸã‚Šãªã©ã€å…¥åŠ›ãƒ•ã‚©ãƒ¼ãƒ 最é©åŒ–ã‚’ãŠã“ãªã£ã¦ã„ã‚‹ã¨æ€ã„ã¾ã™ã€‚ãã®ã“ã¨ã§ã€ã‚³ãƒ³ãƒãƒ¼ã‚¸ãƒ§ãƒ³çŽ‡ãŒã‚ãŒã£ãŸã‚Šã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ãŒã‚¹ãƒˆãƒ¬ã‚¹ã‚’æ„Ÿã˜ãªã„よã†ã«ãªã‚‹ã§ã—ょã†ã€‚入力フォーム最é©åŒ–ã¯EFOå¯¾ç– = Entry Form Optimizationã¨ã‚‚呼ã°ã‚Œã¾ã™ã€‚ サイトã®è¨è¨ˆæ®µéšŽã§æ¤œè¨Žã™ã¹ãã“ã¨ãŒå¤šã„ã§ã™ãŒã€ã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã§ã‚‚考慮ã™ã¹ã事ãŒå¤šã€…ã‚ã‚Šã¾ã™ã€‚今回ã¯HTMLコーダーãŒã‚¨ãƒ³ãƒˆãƒªãƒ¼ãƒ•ã‚©ãƒ¼ãƒ を制作ã™ã‚‹éš›ã«è€ƒæ…®ã™ã¹ã点ã«ã¤ã„ã¦ç´¹ä»‹ã—ã¾ã™ã€‚ ※本記事ã§ã¯æœ€è¿‘ã®ãƒ–ラウザã«é©ã—ãŸHTMLコーディング方法ã®ç´¹ä»‹ã‚’目的ã¨ã—ã¦ã„ã¾ã™ã€‚ãã®ãŸã‚ã€ãƒ‡ã‚¶ã‚¤ãƒ³ã¨ã‚¢ã‚¯ã‚·ãƒ“リティーã§ã®ãƒ™ã‚¹ãƒˆãƒ—ラクティスを紹介ã—ãŸã‚‚ã®ã§ã¯ã‚ã‚Šã¾ã›ã‚“ã®ã§ã”了承ãã ã•ã„。 自動入力機能ã«å¯¾å¿œã—よㆠGoogle Chrome（デスクトッ
モãƒã‚¤ãƒ«ã‚¦ã‚§ãƒ–ã®ã‚³ãƒ³ãƒãƒ¼ã‚¸ãƒ§ãƒ³ã‚’改善ã™ã‚‹ - フォーム編
インターãƒãƒƒãƒˆãŒç™»å ´ã—㦠20 年以上ãŒçµŒéŽã—ã€æ™‚代ã¯ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—ã‹ã‚‰ãƒ¢ãƒã‚¤ãƒ«ã¸ã¨ç§»ã‚Šå¤‰ã‚ã‚Šã¾ã—ãŸã€‚モãƒã‚¤ãƒ«ã§ã¯ã€å˜ã«å°ã•ãªç”»é¢ã«å¯¾å¿œã—ã¦ã„ã‚‹ã ã‘ã§ãªãã€ã‚ˆã‚Šã‚¹ãƒ”ード感ã®ã‚る体験ãŒæ±‚ã‚られã¦ã„ã¾ã™ã€‚ãれ㯠E コマースビジãƒã‚¹ã‚‚例外ã§ã¯ã‚ã‚Šã¾ã›ã‚“。 モãƒã‚¤ãƒ«ã§ã®æ±ºæ¸ˆã«ãŠã„ã¦ã€66% ãŒãƒã‚¤ãƒ†ã‚£ãƒ–アプリã§ã¯ãªãウェブ上ã§è¡Œã‚ã‚Œã¦ã„ã‚‹ã¨ã„ã†ãƒ‡ãƒ¼ã‚¿ãŒã‚ã‚Šã¾ã™ã€‚検索çµæžœã‹ã‚‰ã‚¢ãƒ—リをインストールã—ã¦ã¾ã§å•†å“を購入ã™ã‚‹ã®ã¯æ‰‹é–“ãŒã‹ã‹ã‚Šã™ãŽã‚‹ãŸã‚ã€ãã®ã¾ã¾ã‚¦ã‚§ãƒ–上ã§æ±ºæ¸ˆã—よã†ã¨ã™ã‚‹äººãŒå¤šã„ã“ã¨ãŒåŽŸå› ã¨è€ƒãˆã‚‰ã‚Œã¾ã™ã€‚ ãŸã 逆ã«ãƒ¢ãƒã‚¤ãƒ«ã‚¦ã‚§ãƒ–サイトã¯ã€ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—ã®ã‚¦ã‚§ãƒ–サイトã¨æ¯”較ã¨ã—ã¦ã€ã‚³ãƒ³ãƒãƒ¼ã‚¸ãƒ§ãƒ³ãƒ¬ãƒ¼ãƒˆãŒ 66% 低ã„ã¨ã„ã†ãƒ‡ãƒ¼ã‚¿ã‚‚å˜åœ¨ã—ã¾ã™ã€‚ã“ã‚Œã¯é€†ã«è¨€ãˆã°ã€ãƒ¢ãƒã‚¤ãƒ«ã‚¦ã‚§ãƒ–ã§ã®ã‚³ãƒ³ãƒãƒ¼ã‚¸ãƒ§ãƒ³ãƒ¬ãƒ¼ãƒˆã«ã¯ã¾ã 伸ã³ã—ã‚ãŒã‚ã‚‹ã€ã¨ã„ã†ã“ã¨ã‚‚æ„味ã—ã¦ã„ã¾ã™ã€‚ ãã“ã§ä»Šå›žã¯ã€ãƒ•ã‚©ãƒ¼ãƒ を改善ã™ã‚‹ã“ã¨ã§ãƒ¢ãƒã‚¤ãƒ«ã‚¦
拡大縮å°ã‚‚ã§ãã¦iPhoneã§ãƒ•ã‚©ãƒ¼ãƒ ã«forcusã—ãŸã¨ãズームã—ãªã„よã†ã«ã™ã‚‹
iOSã®Safariã«ã¯ã€ フォームè¦ç´ ã¸ãƒ•ã‚©ãƒ¼ã‚«ã‚¹ã™ã‚‹ã¨ãƒšãƒ¼ã‚¸å…¨ä½“ãŒæ‹¡å¤§ã•ã‚Œã€å…¥åŠ›ãŒçµ‚ã‚ã£ã¦ã‚‚拡大ã•ã‚ŒãŸã¾ã¾ã¨ã„ㆠã‚ã‚ŠãŒãŸè¿·æƒ‘ãªç‹¬è‡ªä»•æ§˜ãŒã‚ã‚Šã¾ã™ã€‚ （ダブルタップやピンãƒã‚¤ãƒ³ã™ã‚‹ã¨å…ƒã®å€çŽ‡ã«æˆ»ã›ã¾ã™ãŒã€æ¯Žå›žãªã®ã§ç…©ã‚ã—ã„…） 以å‰ã€ã“ã®ç¾è±¡ã‚’回é¿ã™ã‚‹æ–¹æ³•ã¨ã—㦠viewportã§ãƒšãƒ¼ã‚¸ã‚’拡大ã§ããªã„よã†ã«ã—ã¦ã€ãƒ•ã‚©ãƒ¼ã‚«ã‚¹æ™‚ã«æ‹¡å¤§ã—ãªã„よã†ã«ã™ã‚‹æ–¹æ³•ã‚’紹介ã—ãŸã®ã§ã™ãŒ ピンãƒã‚¤ãƒ³ï¼ˆã‚¢ã‚¦ãƒˆï¼‰ã§ã®æ‹¡å¤§ç¸®å°ã¯è¨±å¯ã—ãŸã¾ã¾ iPhone（iPad）ã§ãƒ•ã‚©ãƒ¼ãƒ ã«forcusã—ãŸã¨ãズームã—ãªã„よã†ã«ã™ã‚‹æ–¹æ³•ã‚‚ã‚ã‚Šã¾ã—ãŸï¼ サンプル ※iPhoneã§ã²ã‚‰ãã¨å‹•ä½œã‚’確èªã§ãã¾ã™ 入力フォームã®font-sizeãŒé–¢ä¿‚ã—ã¦ã„㟠iOS Safariã®åˆæœŸã‚¹ã‚¿ã‚¤ãƒ«ã§ã€bodyã®æ–‡å—サイズãŒ16pxã«ãªã£ã¦ã„ã‚‹ã‹ã‚‰ã§ã—ょã†ã‹ inputã¨textareaã®æ–‡å—サイズãŒ16px以上ãªã‚‰ フォーカス時ã®è‡ªå‹•æ‹¡
1
ãŠçŸ¥ã‚‰ã›
障害
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
Safariã®ã‚ªãƒ¼ãƒˆã‚³ãƒ³ãƒ—リートã®ä¸æ€è°ãªæŒ™å‹• - Qiita
{{#tags}}- {{label}}
{{/tags}}