ã‚»ã‚ュリティ・ã‚ャンプ全国大会2017ã®è¬›ç¾©è³‡æ–™ã§ã™ï¼ˆMasato Kinugawaã•ã‚“ã¨ã®å…±åŒåˆ¶ä½œã§ã™ï¼‰ã€‚
ブラウザã®è„†å¼±æ€§ã¨ãã®ã‚¤ãƒ³ãƒ‘クト
ã‚»ã‚ュリティ・ã‚ャンプ全国大会2017ã®è¬›ç¾©è³‡æ–™ã§ã™ï¼ˆMasato Kinugawaã•ã‚“ã¨ã®å…±åŒåˆ¶ä½œã§ã™ï¼‰ã€‚
Avoiding the not secure warning in chrome  | Blog  | Chrome for Developers
As announced in September, Chrome will soon mark non-secure pages containing password and credit card input fields as Not Secure in the URL bar. This document is intended to aid Web Developers in updating their sites to avoid this warning. Enable warnings Warnings will be enabled by default for everyone in Chrome 56, slated for release in January 2017. To test the upcoming user experience before t
DevTools Digest, October 2016  | Blog  | Chrome for Developers
Hey hey, Kayce here, back again for another digest to update you on what's new in DevTools since last month. New features in the Console In Chrome 56, which is currently in Canary, the DevTools Console is powered by CodeMirror. This enables a whole bunch of new features, like: Syntax highlighting as you type. Previously, DevTools could only highlight syntax after a code block had been evaluated. M
GPUアクセラレーションã¨position: relativeã«ã‚ˆã‚‹ãƒ¬ã‚¤ãƒ¤ãƒ¼ç”Ÿæˆã«ã¤ã„ã¦
ã¾ãŸã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³... ボタンãªã©ã®UIã«GPUアクセラレーションãŒåŠ¹ã„ãŸã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’ã¤ã‘ãŸã¨ãã€iOSã«ãŠã„ã¦ã¯iPhone4ã‹4Sã®WebViewã‚ãŸã‚Šã€Androidã«ãŠã„ã¦ã¯â€¦.ã¾ã機種ä¾å˜çš„(ã’ã‚“ãªã‚Š)ã«ã€ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã®ç«‹ã¡ä¸ŠãŒã‚ŠãŒé…ã„ã“ã¨ãŒã‚ã‚Šã¾ã™ã€‚ ãã®è¾ºã‚’調査ã—ã¦ã„ãŸã¨ã“ã‚ã€position: relativeã®æŒ‡å®šã«ã‚ˆã‚‹ã€æ„図ã—ãªã„レイヤー生æˆï¼†GPUアクセラレーション巻ãè¾¼ã¿ã«ã‚ˆã£ã¦ã€ä½•ã‹ã—らåˆæˆãƒ¬ã‚¤ãƒ¤ãƒ¼å‘¨ã‚Šã§ã‚ªãƒ¼ãƒãƒ¼ãƒ˜ãƒƒãƒ‰ãŒç™ºç”Ÿã—ã¦ã—ã¾ã£ã¦ã„ã‚‹ã‚“ã§ã¯ãªã„ã‹ãªã€ã¨ã„ã†æ†¶æ¸¬ã«è¡Œãç€ã„ãŸæ¬¡ç¬¬ã€‚今回ã¯ãã®è¾ºã‚Šã‚’見ã¦ã„ãã¾ã™ã€‚ GPUアクセラレーションãŒåŠ¹ã„ãŸã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã¯ã€CSS Animationsã€CSS Transitionsã®ã»ã‹ã€ç‰¹æ®Šãªãƒ—ãƒãƒ‘ティ（transform3d: scale(1,1)ã¨ã‹ï¼‰ã§å¼·åˆ¶çš„ã«GPUアクセラレーションを効ã‹ã›ãŸCanvasã‚¢
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
40. ECMAScript 2015 CSSSnapshot 2015 WHATWG HTML W3C HTML5 Elements & Syntax WAI- ARIA HTML5 Parser Web Workers Web Sockets API Canvas 2D multi media Content Model app cache sections HTML5 Forms Server- Sent ev. Filter Layout Media Queries trans- form Tran- sitions & Anima- tions Flex Box Multi Column Fonts User Inter- face Shapes text decora- tion Pro- mise Class Module block scope Typed Array Ar
flexboxã®ãƒã‚°ã«ç«‹ã¡å‘ã‹ã†ï¼ˆflexboxãƒã‚°ã¾ã¨ã‚） - Qiita
注）本文ä¸ã®ã€Œã‚³ãƒ³ãƒ†ãƒŠã€ã€Œã‚¢ã‚¤ãƒ†ãƒ ã€ã«ã¤ã„㦠本文ä¸ã§ã„ã†ã€Œã‚³ãƒ³ãƒ†ãƒŠã€ã€Œã‚¢ã‚¤ãƒ†ãƒ ã€ã¯ã€flexコンテナã¨flexアイテムã®ã“ã¨ã‚’指ã—ã¦ã„ã¾ã™ã€‚ コンテナ display: flexã‚„ã€wrap指定ãªã©ã‚’ã™ã‚‹ 複数ã®ã‚¢ã‚¤ãƒ†ãƒ ã‚’å«ã‚€ アイテムflex: 1 0 0%ãªã©ã®æŒ‡å®šã‚’ã™ã‚‹ 1. アイテム潰れるå•é¡Œï¼ˆSafari） Chrome Safari æ½°ã‚Œã¦ã¾ã™ã。 èµ·ãã‚‹æ¡ä»¶ Safari ãªãœ コンテンツã®æœ€å°ã‚µã‚¤ã‚ºã‚’å°Šé‡ã—ã¦ãã‚Œãªã„模様 ã©ã†ã™ã‚Œã°ã„ã„ã®ã‹ flex-shrinkã«0を指定 flex-basisã«autoを指定（デフォ値ãªã®ã§ã€æŒ‡å®šãŒãªã‘ã‚Œã°ãã®ã¾ã¾ã§OK） Safari10ã«ã¦ä¿®æ£æ¸ˆã¿ï¼ˆã¤ã¾ã‚Šã€Sierraã¨iOS 10以é™ã§ã¯å¯¾å¿œä¸è¦ï¼‰ 2. align-items:center ã¯ã¿å‡ºã™å•é¡Œ Chrome IE11 ã¯ã¿å‡ºã¦ã¾ã™ã。 èµ·ãã‚‹æ¡ä»¶ IE10-11 f
Old CSS syntax with prefixes - otsukare
Working on Web Compatibility issues for Japan is a kind of nightmare. The two biggest offenders are first versions of WebKit flexbox and gradient. Basically Web developers hurried to use flexbox for their Web sites, but never dared fixing it when the new stable syntax had been released. Web Developers used CSS prefixes to support browsers Browsers have to support Web sites because of their outdate
Firefox 38ã®æ€§èƒ½ã‚’検証 ゲーム・プラットフォームã¨ã—ã¦ã®å„ªç§€ã•ã‚’示㙠- Mozilla Flux
当ブãƒã‚°ã§ã¯ã€å»¶é•·ã‚µãƒãƒ¼ãƒˆç‰ˆï¼ˆESR）ã®ãƒ¡ã‚¸ãƒ£ãƒ¼ã‚¢ãƒƒãƒ—デートãŒè¡Œã‚れる時期をFirefoxã®é–‹ç™ºã®åŒºåˆ‡ã‚Šã¨ã¿ã¦ã€Web上ã§å®Ÿè¡Œå¯èƒ½ãªãƒ™ãƒ³ãƒãƒžãƒ¼ã‚¯ã®æ¸¬å®šçµæžœã‚’公開ã—ã¦ã„る。Firefox 38ã®ãƒªãƒªãƒ¼ã‚¹ã‚’ç›®å‰ã«æŽ§ãˆã€ä»Šå›žã¯ã“れをä¸å¿ƒã«ã€Firefox 2431ãŠã‚ˆã³Chrome 42ã¨æ¯”較ã—ã¦ã¿ãŸã„。 検証を行ã£ãŸå…·ä½“çš„ãªãƒãƒ¼ã‚¸ãƒ§ãƒ³ã‚’挙ã’ã‚‹ã¨ã€32bit版ã®Firefox 31.6.0（ビルドID：20150325203137）ãŠã‚ˆã³Firefox 38.0 RC1（ビルドID：20150503173159）ã€ãã‚Œã«64bit版ã®Chrome 42（ãƒãƒ¼ã‚¸ãƒ§ãƒ³ï¼š42.0.2311.135m）ã§ã‚る。GoogleãŒä¸€èˆ¬ãƒ¦ãƒ¼ã‚¶ãƒ¼å‘ã‘ã«64bit版Chromeã‚’æä¾›ã—ã€ãã“ã§æ€§èƒ½ã®å‘上を謳ã£ã¦ã„る以上ã€ã“ã‚Œã«ç›®ã‚’ã¤ã¶ã£ã¦32bit版ã§æƒãˆã¦ã‚‚フェアã§ã¯ãªã„ã ã‚ã†ã¨åˆ¤æ–ã—ãŸã€‚ 動作環境ã«ã¤ã„ã¦ã ãŒã€
Chrome 43ã‹ã‚‰DOMã®å±žæ€§ãŒJSã®ãƒ—ãƒãƒˆã‚¿ã‚¤ãƒ—ãƒã‚§ãƒ¼ãƒ³ã«ç§»è¡Œã—ã¾ã™ - Qiita
Chrome 43ãŠã‚ˆã³ãれ以é™ã®ãƒãƒ¼ã‚¸ãƒ§ãƒ³ã«ãŠã„ã¦ã€DOMã®å±žæ€§ï¼ˆå€¤ï¼‰ãŒJavaScriptã®ãƒ—ãƒãƒˆã‚¿ã‚¤ãƒ—ãƒã‚§ãƒ¼ãƒ³ã«ç§»è¡Œã•ã‚Œã¾ã™ã€‚ã“ã‚Œã«ã‚ˆã‚Šã€çªã£è¾¼ã‚“ã ã“ã¨ã‚’ã‚„ã£ã¦ã„ãŸå ´åˆã«ã€ä»Šã¾ã§å‹•ä½œã—ã¦ã„ãŸã‚³ãƒ¼ãƒ‰ãŒå‹•ã‹ãªã„ã¨ã„ã†ã“ã¨ãŒç™ºç”Ÿã™ã‚‹å¯èƒ½æ€§ãŒã‚ã‚Šã¾ã™ã®ã§ã€äº‹å‰ã«å¤‰æ›´å†…容を知りã€å¯¾ç–ã‚’ã—ã¦ãŠãã“ã¨ãŒæ±‚ã‚られã¾ã™ã€‚HTML5Rockã®æ›´æ–°æƒ…å ±ã¨ã—ã¦æŽ²è¼‰ã•ã‚Œã¦ã„ã¾ã—ãŸã®ã§ã€ã•ã£ãã日本語訳をã—ã¦ã¿ã¾ã—ãŸã€‚心当ãŸã‚ŠãŒã‚ã‚‹æ–¹ã¯ã€ãœã²ä»¥ä¸‹ã®å†…容をèªã‚“ã§ã„ãŸã ã„ã¦ã€ã‚³ãƒ¼ãƒ‰ã®ä¿®æ£ãªã©ã«å–り込んã§ã„ãŸã ã‘ã‚Œã°ã¨æ€ã„ã¾ã™ã€‚ 原文: http://updates.html5rocks.com/2015/04/DOM-attributes-now-on-the-prototype DOM属性ã¯ä»Šå¾Œãƒ—ãƒãƒˆã‚¿ã‚¤ãƒ—ãƒã‚§ãƒ¼ãƒ³ã« Chromeãƒãƒ¼ãƒ ã¯ã€æœ€è¿‘「DOM属性をプãƒãƒˆã‚¿ã‚¤ãƒ—ãƒã‚§ãƒ¼ãƒ³ã«ç§»å‹•ã—ã¦ã„ã¾ã™ã€ã¨ã‚¢ãƒŠã‚¦ãƒ³ã‚¹ã—ã¦ã„
meta name="referrer"ã¯ã€HTTPS→HTTPã§ã‚‚リファラを出ã™æ–°ã—ã„仕様 | åˆä»£ç·¨é›†é•·ãƒ–ãƒã‚°â€•å®‰ç”°è‹±ä¹…
今日ã¯ã€ã¡ã‚‡ã£ã¨æŠ€è¡“çš„ãªè©±ã‚’。「meta referrerã€ã¨ã„ã†ã€ãƒªãƒ³ã‚¯ã‚’クリックã—ã¦ãƒšãƒ¼ã‚¸ç§»å‹•ã™ã‚‹ã¨ããªã©ã«ãƒªãƒ•ã‚¡ãƒ©ã‚’ã©ã†é€ã‚‹ã‹ã‚’ã€ãƒšãƒ¼ã‚¸å´ã§æŒ‡å®šã§ãã‚‹ã‚¿ã‚°ã®å®Ÿè£…ãŒé€²ã‚“ã§ã„ã‚‹ã®ã§ã™ã€‚ グーグルã¯HTTPSを推奨ã™ã‚‹ã‘ã‚Œã©ã‚‚ã€ãƒªãƒ•ã‚¡ãƒ©ãŒâ€¦â€¦ã‚°ãƒ¼ã‚°ãƒ«ã¯ã€ã‚µã‚¤ãƒˆãŒHTTPSã‹ã©ã†ã‹ã‚’é †ä½æ±ºå®šã®è¦å› ã¨ã™ã‚‹ãªã©ã€HTTPSを推奨ã—ã¦ã„ã¾ã™ã€‚ ã§ã‚‚ã€è‡ªåˆ†ã®ã‚µã‚¤ãƒˆã‚’HTTPSã«ã™ã‚‹ã¨ã€è‡ªåˆ†ã®ã‚µã‚¤ãƒˆã‹ã‚‰éžHTTPS（ãµã¤ã†ã®HTTP）ã®ã‚µã‚¤ãƒˆã¸ã®ãƒªãƒ³ã‚¯ã‚’クリックã—ãŸã¨ãã«ã€ãƒªãƒ•ã‚¡ãƒ©ãŒé£›ã°ãªã„ã‚“ã§ã™ã‚ˆã。 ã“ã‚Œã¯ã€RFC 2616ã§ã€ã€Œã‚»ã‚ュア接続ã®ãƒšãƒ¼ã‚¸ã‹ã‚‰ã€éžã‚»ã‚ュア接続ã®ãƒšãƒ¼ã‚¸ã«ç§»å‹•ã™ã‚‹ã¨ãã¯ã€ãƒªãƒ•ã‚¡ãƒ©ã‚’é€å‡ºã™ã‚‹ã¹ãã§ã¯ãªã„ã€ã¨å®šã‚られã¦ã„ã‚‹ã‹ã‚‰ã§ã™ï¼ˆã‚»ã‚¯ã‚·ãƒ§ãƒ³15.1.3）。 ã¨ã¯ã„ãˆã€Webæ‹…ã®ã‚ˆã†ãªãƒ¡ãƒ‡ã‚£ã‚¢ã§ã¯ã€ã€ŒWebæ‹…ã®ãƒšãƒ¼ã‚¸ã‹ã‚‰ã€ã†ã¡ã®ã‚µã‚¤ãƒˆã«ã‘ã£ã“ã†æ¥ã‚‹äººã„ã‚‹ã‚“ã§ã™ã‚ˆã€ã¨ã„ã†å応も大
スクãƒãƒ¼ãƒ«ãƒãƒ¼ã®å¹…
スクãƒãƒ¼ãƒ«ãƒãƒ¼ã®å¹…を知りãŸã„ã“ã¨ã¯ã¾ã¾ã‚る。CSSã§æ‹¾ãˆã‚Œã°æœ€é«˜ãªã®ã ã‘ã©â€¦â€¦ã¨ã„ã†ã¨ã“ã‚ã§ã€calc(100vw - 100%)ã§æ‹¾ãˆã‚‹ã“ã¨ãŒã‚ã‹ã£ãŸã€‚ãŸã ã“ã‚Œã§æ‹¾ãˆã‚‹ã‹ã©ã†ã‹ã¯ãã®è¦ç´ ã®è¦ªã«ä¾å˜ã™ã‚‹ã®ã§ã€ã„ã¤ã§ã‚‚ã©ã“ã§ã‚‚使ãˆã‚‹ã‚ã‘ã§ã¯ãªã„。ã›ã‚ã¦JavaScriptã§ã¯æ‰±ãˆã‚‹ã‚ˆã†ã«ã—ã¦ã¿ãŸã„。 Demo: Get Scrollbar Width with JavaScript ボタンをクリックã™ã‚‹ã¨ã‚¹ã‚¯ãƒãƒ¼ãƒ«ãƒãƒ¼ã®å¹…ãŒãƒ€ã‚¤ã‚¢ãƒã‚°ã§è¡¨ç¤ºã•ã‚Œã‚‹ã€‚オーãƒãƒ¼ãƒ¬ã‚¤ã®ã‚¹ã‚¯ãƒãƒ¼ãƒ«ãƒãƒ¼ã®å ´åˆã¯0pxã«ãªã‚Šã€ãã†ã§ãªã„å ´åˆã¯ã‚¹ã‚¯ãƒãƒ¼ãƒ«ãƒãƒ¼ã®å¹…ãŒè¿”る。bodyè¦ç´ ã®å¹…ãŒ100%ã§ã‚ã‚‹ã“ã¨ãŒæ¡ä»¶ã«ãªã‚‹ãŒã€ã¾ãšå¤§ä¸ˆå¤«ã ã‚ã†ã€‚ 仕組ã¿ã¯å˜ç´”ãªã‚‚ã®ã§widthプãƒãƒ‘ティーをcalc(100vw - 100%)ã«ã—ãŸè¦ç´ ã‚’bodyè¦ç´ ã®åã«çªã£è¾¼ã‚“ã§ã€è¨ˆç®—済ã¿ã‚¹ã‚¿ã‚¤ãƒ«ã‚’拾ã†ã¨ã„ã†ã ã‘ã 。overflowプãƒãƒ‘ティー
リアル㪠DOM ã¯ãªãœé…ã„ã®ã‹ - steps to phantasien
ã“れ㯠VirtualDOM Advent Calendar 2014 ã«å‹æ‰‹ã«å‚åŠ ã™ã‚‹è¨˜äº‹ã§ã™ã€‚ ã‚ãŸãŸã‹ã„春ã®æ˜¼ä¸‹ãŒã‚Šã®ã“ã¨ã€ã‚るブラウザベンダã®ç¤¾å†…ã‚’ä¸ç©ãªå™‚ãŒé§†ã‘å·¡ã£ãŸã€‚ 「React.js ãªã‚‹ãƒ©ã‚¤ãƒ–ラリã€ã©ã†ã‚‚仮想 DOM ã¨ã„ã†ã‚„ã¤ã®ã›ã„ã§é€Ÿã„らã—ã„ãžã€ ã‚‚ã†ãƒªã‚¢ãƒ«ãª DOM ã¯ãŠå½¹å¾¡å…ã€ãƒ–ラウザも商売上ãŒã£ãŸã‚Šã‹ãƒ»ãƒ»ãƒ»ã€‚雇用ã«ä¸å®‰ã‚’覚ãˆã‚‹äºº(ç§)ãŒã„る一方〠ãã®ã‚¢ã‚¤ãƒ‡ã‚¢ã‚’ã¨ã‚Šã“ã‚“ã§ãƒ–ラウザ㮠DOM を速ã出æ¥ãªã„ã‹ã¨è€ƒãˆã‚‹äººãŸã¡ã‚‚ã„ãŸã€‚ 仮想 DOM ã¯ãªãœé€Ÿã„ã®ã‹ã€‚誰ã‹ã®ã¤ã¦ã‚’辿ã£ã¦ React.js ãƒãƒ¼ãƒ ã«ãŠã„ã§ã„ãŸã ãã€é€Ÿã•ã®ç§˜å¯†ã‚’テックトークã—ã¦ã‚‚らã†ã€‚ イミュータブルãªãƒ‡ãƒ¼ã‚¿æ§‹é€ ã«ã‚ˆã‚‹å˜ç´”化ã€éžåŒæœŸé©ç”¨ã«ã‚ˆã‚‹å‡¦ç†ã®ãƒãƒƒãƒåŒ–ã€å·®åˆ†ã‚¢ãƒ«ã‚´ãƒªã‚ºãƒ ã«ã‚ˆã‚‹å‰¯ä½œç”¨ã®æœ€å°åŒ–… ã„ãã¤ã‹ã®ã‚¢ã‚¤ãƒ‡ã‚¢ã¯ãƒ–ラウザã‹ã‚‰ã¯ã©ã†ã«ã‚‚ãªã‚‰ãªã„ãŒã€ãŸã¨ãˆã°éžåŒæœŸåŒ–ãªã‚“ã‹ã¯å½¢ã¯é•ãˆã©ãƒ–ラウザ
1
ランã‚ング
ランã‚ング
ãŠçŸ¥ã‚‰ã›
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
ブラウザ拡張ã®ã‚¯ãƒã‚¹ãƒ–ラウザ対応ã«ã¤ã„ã¦ã©ã†å‘ãåˆã£ã¦ã„ã‚‹ã‹ #builderscon
Manage hyphens with CSS Â |Â CSS and UI Â |Â Chrome for Developers
{{#tags}}- {{label}}
{{/tags}}