1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
---
title: Firefox 60 for developers
slug: Mozilla/Firefox/Releases/60
translation_of: Mozilla/Firefox/Releases/60
---
<div>{{FirefoxSidebar}}</div><div>{{draft}}</div>
<p class="summary">This article provides information about the changes in Firefox 60 that will affect developers. Firefox 60 is the current <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly">Nightly version of Firefox</a>, and will ship on <a href="https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates">May 8, 2018</a>.</p>
<h2 id="Stylo_comes_to_Firefox_for_Android_in_60">Stylo comes to Firefox for Android in 60</h2>
<p><a href="https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/">Firefox's new parallel CSS engine</a> — also known as <strong>Quantum CSS</strong> or <strong>Stylo</strong>, which was <a href="/en-US/Firefox/Releases/57#Firefox_57_Firefox_Quantum">first enabled by default in Firefox 57 for desktop</a>, has now been enabled in Firefox for Android.</p>
<h2 id="Changes_for_web_developers">Changes for web developers</h2>
<h3 id="Developer_tools">Developer tools</h3>
<ul>
<li>In the CSS Pane rules view (see <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a>), the keyboard shortcuts for precise value increments (increase/decrease by 0.1) have changed from <kbd>Alt</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> to <kbd>Ctrl</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> on Linux and Windows, to avoid clashes with default OS-level shortcuts (see {{bug("1413314")}}).</li>
<li>Also in the CSS Pane rules view, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS variable names</a> will now auto-complete ({{bug(1422635)}}). If you enter <code>var(</code> into a property value and then type a dash (<code>-</code>), any variables you have declared in your CSS will then appear in an autocomplete list.</li>
</ul>
<h3 id="HTML">HTML</h3>
<p>Pressing the Enter key in <code>designMode</code> and <code>contenteditable</code> now inserts <code><div></code> elements when the caret is in an inline element or text node which is a child of a block level editing host — instead of inserting <code><br></code> elements like it used to. If you want to use the old behavior on your app, you can do it with <code>document.execCommand()</code>. See <a href="/en-US/docs/Web/Guide/HTML/Editable_content#Differences_in_markup_generation">Differences in markup generation</a> for more details.</p>
<h3 id="CSS">CSS</h3>
<ul>
<li>The {{cssxref("align-content")}}, {{cssxref("align-items")}}, {{cssxref("align-self")}}, {{cssxref("justify-content")}}, and {{cssxref("place-content")}} property values have been updated as per the latest <a href="https://drafts.csswg.org/css-align-3/">CSS Box Alignment Module Level 3</a> spec ({{bug(1430817)}}).</li>
<li>The {{cssxref("paint-order")}} property has been implemented ({{bug(1426146)}}).</li>
</ul>
<h3 id="SVG">SVG</h3>
<p><em>No changes.</em></p>
<h3 id="JavaScript">JavaScript</h3>
<p>The {{jsxref("Array.prototype.values()")}} method has been added again ({{bug(1420101)}}). It was disabled due to <a href="https://www.fxsitecompat.com/en-CA/docs/2016/array-prototype-values-breaks-some-legacy-apps/">compatibilty issues</a> in earlier versions. Make sure your code doesn't have any custom implementation of this method.</p>
<h3 id="APIs">APIs</h3>
<h4 id="New_APIs">New APIs</h4>
<p><em>No changes.</em></p>
<h4 id="DOM">DOM</h4>
<ul>
<li>In the <a href="/en-US/docs/Web/API/Web_Authentication_API">Web Authentication API</a>, the <code>MakePublicKeyCredentialOptions</code> dictionary object has been renamed {{domxref("PublicKeyCredentialCreationOptions")}}; this change has been made in Firefox ({{bug(1436473)}}).</li>
<li>The <code>dom.workers.enabled</code> pref has been removed, meaning workers can no longer be disabled ({{bug(1434934)}}).</li>
<li>The {{domxref("Document.body","body")}} property is now implemented on the {{domxref("Document")}} interface, rather than the {{domxref("HTMLDocument")}} interface ({{bug(1276438)}}).</li>
<li>{{domxref("PerformanceResourceTiming")}} is now available in workers ({{bug(1425458)}}).</li>
<li>The {{domxref("PerformanceObserver.takeRecords()")}} method has been implemented ({{bug(1436692)}}).</li>
<li>The {{domxref("KeyboardEvent.keyCode")}} attribute of punctuation key becomes non-zero even if active keyboard layout doesn't produce ASCII character. See <a href="/en-US/docs/Web/API/KeyboardEvent/keyCode#keyCode_of_punctuation_keys_on_some_keyboard_layout">the detail</a>. Note that please do <strong>not</strong> use <code>KeyboardEvent.keyCode</code> in new applications. Please consider to use {{domxref("KeyboardEvent.key")}} or {{domxref("KeyboardEvent.code")}} instead.</li>
<li>The {{domxref("Animation.updatePlaybackRate()")}} method has been implemented ({{bug("1436659")}}).</li>
<li>New rules have been included for determining <a href="/en-US/docs/Web/API/KeyboardEvent/keyCode#keyCode_of_punctuation_keys_on_some_keyboard_layout">keyCode values of punctuation keys</a> ({{bug(1036008)}}).</li>
</ul>
<h4 id="DOM_events">DOM events</h4>
<p><em>No changes.</em></p>
<h4 id="Service_workers">Service workers</h4>
<p><em>No changes.</em></p>
<h4 id="Media_and_WebRTC">Media and WebRTC</h4>
<ul>
<li>When recording or sharing media obtained using {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, muting the camera by setting the corresponding track's {{domxref("MediaStreamTrack.enabled")}} property to <code>false</code> now turns off the camera's "in use" indicator light, to help the user more easily see that the camera is not in use ({{bug(1299515)}}).</li>
<li>Removing a track from an {{domxref("RTCPeerConnection")}} using {{domxref("RTCPeerConnection.removeTrack", "removeTrack()")}} no longer removes the track's {{domxref("RTCRtpSender")}} from the peer connection's list of senders as reported by {{domxref("RTCPeerConnection.getSenders", "getSenders()")}} ({{bug(1290949)}}).</li>
<li>The {{domxref("RTCRtpContributingSource")}} and {{domxref("RTCRtpSynchronizationSource")}} objects' timestamps were previously being reported based on values returned by {{jsxref("Date.getTime()")}}. In Firefox 60, these have been fixed to correctly use the <a href="/en-US/docs/Web/API/Performance_API">Performance Timing API</a> instead ({{bug(1433576)}}).</li>
</ul>
<h4 id="Canvas_and_WebGL">Canvas and WebGL</h4>
<p><em>No changes.</em></p>
<h3 id="CSSOM">CSSOM</h3>
<p><em>No changes.</em></p>
<h3 id="HTTP">HTTP</h3>
<p><em>No changes.</em></p>
<h3 id="Security">Security</h3>
<p><em>No changes.</em></p>
<h3 id="Plugins">Plugins</h3>
<p><em>No changes.</em></p>
<h3 id="Other">Other</h3>
<p><em>No changes.</em></p>
<h2 id="Removals_from_the_web_platform">Removals from the web platform</h2>
<h3 id="HTML_2">HTML</h3>
<p><em>No changes.</em></p>
<h3 id="CSS_2">CSS</h3>
<ul>
<li>The proprietary {{cssxref("-moz-user-input")}} property's <code>enabled</code> and <code>disabled</code> values are no longer available ({{bug("1405087")}}).</li>
<li>The proprietary {{cssxref("-moz-border-top-colors")}}, {{cssxref("-moz-border-right-colors")}}, {{cssxref("-moz-border-bottom-colors")}}, and {{cssxref("-moz-border-left-colors")}} properties have been removed from the platform completely ({{bug(1429723)}}).</li>
</ul>
<h3 id="JavaScript_2">JavaScript</h3>
<p>The non-standard <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Expression_closures">expression closure</a> syntax has been removed ({{bug(1426519)}}).</p>
<h3 id="APIs_2">APIs</h3>
<p><em>No changes.</em></p>
<h3 id="SVG_2">SVG</h3>
<p><em>No changes.</em></p>
<h3 id="Other_2">Other</h3>
<p><em>No changes.</em></p>
<h2 id="Changes_for_add-on_and_Mozilla_developers">Changes for add-on and Mozilla developers</h2>
<h3 id="WebExtensions">WebExtensions</h3>
<p><em>No changes.</em></p>
<h2 id="See_also">See also</h2>
<ul>
<li>Site compatibility for Firefox 60</li>
</ul>
<h2 id="Older_versions">Older versions</h2>
<p>{{Firefox_for_developers(58)}}</p>
<p> </p>
|
