1 files changed, 88 insertions, 0 deletions
diff --git a/files/de/web/css/media_queries/testing_media_queries/index.html b/files/de/web/css/media_queries/testing_media_queries/index.html
new file mode 100644
index 0000000000..c30abd2ccd
--- /dev/null
+++ b/files/de/web/css/media_queries/testing_media_queries/index.html
@@ -0,0 +1,88 @@
+---
+title: Media Queries programmatisch testen
+slug: Web/CSS/Media_Queries/Testing_media_queries
+translation_of: Web/CSS/Media_Queries/Testing_media_queries
+---
+<div>{{cssref}}</div>
+
+<p>The {{Glossary("DOM")}} provides features that can test the results of a <a href="/en-US/docs/Web/CSS/Media_Queries">media query</a> programmatically, via the {{domxref("MediaQueryList")}} interface and its methods and properties. Once you've created a <code>MediaQueryList</code> object, you can check the result of the query or receive notifications when the result changes.</p>
+
+<h2 id="Creating_a_media_query_list">Creating a media query list</h2>
+
+<p>Before you can evaluate the results of a media query, you need to create the <code>MediaQueryList</code> object representing the query. To do this, use the {{domxref("window.matchMedia")}} method.</p>
+
+<p>For example, to set up a query list that determines if the device is in landscape or portrait orientation:</p>
+
+<pre class="brush: js notranslate">const mediaQueryList = window.matchMedia("(orientation: portrait)");
+</pre>
+
+<h2 id="Checking_the_result_of_a_query">Checking the result of a query</h2>
+
+<p>Once you've created your media query list, you can check the result of the query by looking at the value of its <code>matches</code> property:</p>
+
+<pre class="brush: js notranslate">if (mediaQueryList.matches) {
+  /* The viewport is currently in portrait orientation */
+} else {
+  /* The viewport is not currently in portrait orientation, therefore landscape */
+}
+</pre>
+
+<h2 id="Receiving_query_notifications">Receiving query notifications</h2>
+
+<p>If you need to be aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a <a href="/en-US/docs/Web/API/EventTarget/addEventListener">listener</a> than to poll the query's result. To do this, call the <code>addListener()</code> method on the {{domxref("MediaQueryList")}} object, with a callback function to invoke when the media query status changes (e.g., the media query test goes from <code>true</code> to <code>false</code>):</p>
+
+<pre class="brush: js notranslate">// Create the query list.
+const mediaQueryList = window.matchMedia("(orientation: portrait)");
+
+// Define a callback function for the event listener.
+function handleOrientationChange(mql) {
+  // ...
+}
+
+// Run the orientation change handler once.
+handleOrientationChange(mediaQueryList);
+
+// Add the callback function as a listener to the query list.
+mediaQueryList.addListener(handleOrientationChange);
+</pre>
+
+<p>This code creates the orientation-testing media query list, then adds an event listener to it. After adding the listener, we also call the listener directly. This makes our listener perform adjustments based on the current device orientation; otherwise, our code might assume the device is in portrait mode at startup, even if it's actually in landscape mode.</p>
+
+<p>The <code>handleOrientationChange()</code> function would look at the result of the query and handle whatever we need to do on an orientation change:</p>
+
+<pre class="brush: js notranslate">function handleOrientationChange(evt) {
+  if (evt.matches) {
+    /* The viewport is currently in portrait orientation */
+  } else {
+    /* The viewport is currently in landscape orientation */
+  }
+}
+</pre>
+
+<p>Above, we define the parameter as <code>evt</code> — an event object. This makes sense because <a href="/en-US/docs/Web/API/MediaQueryList#Browser_compatibility">newer implementations of <code>MediaQueryList</code></a> handle event listeners in a standard way. They no longer use the unusual {{domxref("MediaQueryListListener")}} mechanism, but a standard event listener setup, passing an <a href="/en-US/docs/Web/API/Event">event object</a> of type {{domxref("MediaQueryListEvent")}} as the argument to the callback function.</p>
+
+<p>This event object also includes the {{domxref("MediaQueryListEvent.media","media")}} and {{domxref("MediaQueryListEvent.matches","matches")}} properties, so you can query these features of the <code>MediaQueryList</code> by directly accessing it, or accessing the event object.</p>
+
+<h2 id="Ending_query_notifications">Ending query notifications</h2>
+
+<p>To stop receiving notifications about changes to the value of your media query, call <code>removeListener()</code> on the <code>MediaQueryList</code>, passing it the name of the previously-defined callback function:</p>
+
+<pre class="brush: js notranslate">mediaQueryList.removeListener(handleOrientationChange);
+</pre>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<h3 id="MediaQueryList_interface"><code>MediaQueryList</code> interface</h3>
+
+
+
+<p>{{Compat("api.MediaQueryList")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Media_queries">Media queries</a></li>
+ <li>{{domxref("window.matchMedia()")}}</li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("MediaQueryListEvent")}}</li>
+</ul>