diff --git a/Meta/Lagom/Tools/CodeGenerators/LibWeb/CMakeLists.txt b/Meta/Lagom/Tools/CodeGenerators/LibWeb/CMakeLists.txt
index a757779a76..e9963fc06e 100644
--- a/Meta/Lagom/Tools/CodeGenerators/LibWeb/CMakeLists.txt
+++ b/Meta/Lagom/Tools/CodeGenerators/LibWeb/CMakeLists.txt
@@ -1,8 +1,10 @@
 set(SOURCES "") # avoid pulling SOURCES from parent scope
 
-lagom_tool(Generate_CSS_PropertyID_h   SOURCES Generate_CSS_PropertyID_h.cpp)
-lagom_tool(Generate_CSS_PropertyID_cpp SOURCES Generate_CSS_PropertyID_cpp.cpp)
-lagom_tool(Generate_CSS_ValueID_h      SOURCES Generate_CSS_ValueID_h.cpp)
-lagom_tool(Generate_CSS_ValueID_cpp    SOURCES Generate_CSS_ValueID_cpp.cpp)
+lagom_tool(Generate_CSS_MediaFeatureID_h   SOURCES Generate_CSS_MediaFeatureID_h.cpp LIBS LagomMain)
+lagom_tool(Generate_CSS_MediaFeatureID_cpp SOURCES Generate_CSS_MediaFeatureID_cpp.cpp LIBS LagomMain)
+lagom_tool(Generate_CSS_PropertyID_h       SOURCES Generate_CSS_PropertyID_h.cpp)
+lagom_tool(Generate_CSS_PropertyID_cpp     SOURCES Generate_CSS_PropertyID_cpp.cpp)
+lagom_tool(Generate_CSS_ValueID_h          SOURCES Generate_CSS_ValueID_h.cpp)
+lagom_tool(Generate_CSS_ValueID_cpp        SOURCES Generate_CSS_ValueID_cpp.cpp)
 
 add_subdirectory(WrapperGenerator)
diff --git a/Meta/Lagom/Tools/CodeGenerators/LibWeb/Generate_CSS_MediaFeatureID_cpp.cpp b/Meta/Lagom/Tools/CodeGenerators/LibWeb/Generate_CSS_MediaFeatureID_cpp.cpp
new file mode 100644
index 0000000000..88c6e156a9
--- /dev/null
+++ b/Meta/Lagom/Tools/CodeGenerators/LibWeb/Generate_CSS_MediaFeatureID_cpp.cpp
@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include "GeneratorUtil.h"
+#include <AK/SourceGenerator.h>
+#include <AK/StringBuilder.h>
+#include <LibMain/Main.h>
+
+ErrorOr<int> serenity_main(Main::Arguments arguments)
+{
+    if (arguments.argc != 2) {
+        warnln("usage: {} <path/to/CSS/MediaFeatures.json", arguments.strings[0]);
+        return 1;
+    }
+
+    auto json = TRY(read_entire_file_as_json(arguments.strings[1]));
+    VERIFY(json.is_object());
+
+    StringBuilder builder;
+    SourceGenerator generator { builder };
+    generator.append(R"~~~(#include <LibWeb/CSS/MediaFeatureID.h>
+
+namespace Web::CSS {
+
+Optional<MediaFeatureID> media_feature_id_from_string(StringView string)
+{)~~~");
+
+    json.as_object().for_each_member([&](auto& name, auto&) {
+        auto member_generator = generator.fork();
+        member_generator.set("name", name);
+        member_generator.set("name:titlecase", title_casify(name));
+        member_generator.append(R"~~~(
+    if (string.equals_ignoring_case("@name@"sv))
+        return MediaFeatureID::@name:titlecase@;
+)~~~");
+    });
+
+    generator.append(R"~~~(
+    return {};
+}
+
+char const* string_from_media_feature_id(MediaFeatureID media_feature_id)
+{
+    switch (media_feature_id) {)~~~");
+
+    json.as_object().for_each_member([&](auto& name, auto&) {
+        auto member_generator = generator.fork();
+        member_generator.set("name", name);
+        member_generator.set("name:titlecase", title_casify(name));
+        member_generator.append(R"~~~(
+    case MediaFeatureID::@name:titlecase@:
+        return "@name@";)~~~");
+    });
+
+    generator.append(R"~~~(
+    }
+    VERIFY_NOT_REACHED();
+}
+
+}
+)~~~");
+
+    outln("{}", generator.as_string_view());
+
+    return 0;
+}
diff --git a/Meta/Lagom/Tools/CodeGenerators/LibWeb/Generate_CSS_MediaFeatureID_h.cpp b/Meta/Lagom/Tools/CodeGenerators/LibWeb/Generate_CSS_MediaFeatureID_h.cpp
new file mode 100644
index 0000000000..b94288345a
--- /dev/null
+++ b/Meta/Lagom/Tools/CodeGenerators/LibWeb/Generate_CSS_MediaFeatureID_h.cpp
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include "GeneratorUtil.h"
+#include <AK/SourceGenerator.h>
+#include <AK/StringBuilder.h>
+#include <LibMain/Main.h>
+
+ErrorOr<int> serenity_main(Main::Arguments arguments)
+{
+    if (arguments.argc != 2) {
+        warnln("usage: {} <path/to/CSS/MediaFeatures.json", arguments.strings[0]);
+        return 1;
+    }
+
+    auto json = TRY(read_entire_file_as_json(arguments.strings[1]));
+    VERIFY(json.is_object());
+
+    StringBuilder builder;
+    SourceGenerator generator { builder };
+    generator.append(R"~~~(#pragma once
+
+#include <AK/StringView.h>
+#include <AK/Traits.h>
+
+namespace Web::CSS {
+
+enum class MediaFeatureID {)~~~");
+
+    json.as_object().for_each_member([&](auto& name, auto&) {
+        auto member_generator = generator.fork();
+        member_generator.set("name:titlecase", title_casify(name));
+        member_generator.append(R"~~~(
+    @name:titlecase@,)~~~");
+    });
+
+    generator.append(R"~~~(
+};
+
+Optional<MediaFeatureID> media_feature_id_from_string(StringView);
+char const* string_from_media_feature_id(MediaFeatureID);
+
+}
+)~~~");
+
+    outln("{}", generator.as_string_view());
+
+    return 0;
+}
diff --git a/Meta/Lagom/Tools/CodeGenerators/LibWeb/GeneratorUtil.h b/Meta/Lagom/Tools/CodeGenerators/LibWeb/GeneratorUtil.h
index b1f20c5d68..7d68df56ce 100644
--- a/Meta/Lagom/Tools/CodeGenerators/LibWeb/GeneratorUtil.h
+++ b/Meta/Lagom/Tools/CodeGenerators/LibWeb/GeneratorUtil.h
@@ -1,13 +1,16 @@
 /*
  * Copyright (c) 2019-2021, Andreas Kling <kling@serenityos.org>
+ * Copyright (c) 2022, Samuel Atkins <atkinssj@serenityos.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
 #pragma once
 
+#include <AK/JsonObject.h>
 #include <AK/String.h>
 #include <AK/Vector.h>
+#include <LibCore/Stream.h>
 #include <ctype.h>
 
 String title_casify(String const& dashy_name)
@@ -45,3 +48,13 @@ String camel_casify(StringView dashy_name)
     }
     return builder.to_string();
 }
+
+ErrorOr<JsonValue> read_entire_file_as_json(StringView filename)
+{
+    auto file = TRY(Core::Stream::File::open(filename, Core::Stream::OpenMode::Read));
+    auto json_size = TRY(file->size());
+    auto json_data = TRY(ByteBuffer::create_uninitialized(json_size));
+    if (!file->read_or_error(json_data.bytes()))
+        return Error::from_string_literal("Failed to read json file.");
+    return JsonValue::from_string(json_data);
+}
diff --git a/Userland/Libraries/LibWeb/CMakeLists.txt b/Userland/Libraries/LibWeb/CMakeLists.txt
index e788d6705b..c605b26612 100644
--- a/Userland/Libraries/LibWeb/CMakeLists.txt
+++ b/Userland/Libraries/LibWeb/CMakeLists.txt
@@ -33,6 +33,8 @@ set(SOURCES
     CSS/Display.cpp
     CSS/Frequency.cpp
     CSS/Length.cpp
+    CSS/MediaFeatureID.cpp
+    CSS/MediaFeatureID.h
     CSS/MediaList.cpp
     CSS/MediaQuery.cpp
     CSS/MediaQueryList.cpp
@@ -570,6 +572,32 @@ libweb_js_wrapper(XHR/ProgressEvent)
 libweb_js_wrapper(XHR/XMLHttpRequest)
 libweb_js_wrapper(XHR/XMLHttpRequestEventTarget)
 
+add_custom_command(
+    OUTPUT CSS/MediaFeatureID.h
+    COMMAND ${CMAKE_COMMAND} -E make_directory CSS
+    COMMAND "$<TARGET_FILE:Lagom::Generate_CSS_MediaFeatureID_h>" "${CMAKE_CURRENT_SOURCE_DIR}/CSS/MediaFeatures.json" > CSS/MediaFeatureID.h.tmp
+    COMMAND "${CMAKE_COMMAND}" -E copy_if_different CSS/MediaFeatureID.h.tmp CSS/MediaFeatureID.h
+    COMMAND "${CMAKE_COMMAND}" -E remove CSS/MediaFeatureID.h.tmp
+    VERBATIM
+    DEPENDS Lagom::Generate_CSS_MediaFeatureID_h
+    MAIN_DEPENDENCY CSS/MediaFeatures.json
+)
+add_custom_target(generate_MediaFeatureID.h DEPENDS CSS/MediaFeatureID.h)
+add_dependencies(all_generated generate_MediaFeatureID.h)
+
+add_custom_command(
+    OUTPUT CSS/MediaFeatureID.cpp
+    COMMAND ${CMAKE_COMMAND} -E make_directory CSS
+    COMMAND "$<TARGET_FILE:Lagom::Generate_CSS_MediaFeatureID_cpp>" "${CMAKE_CURRENT_SOURCE_DIR}/CSS/MediaFeatures.json" > CSS/MediaFeatureID.cpp.tmp
+    COMMAND "${CMAKE_COMMAND}" -E copy_if_different CSS/MediaFeatureID.cpp.tmp CSS/MediaFeatureID.cpp
+    COMMAND "${CMAKE_COMMAND}" -E remove CSS/MediaFeatureID.cpp.tmp
+    VERBATIM
+    DEPENDS Lagom::Generate_CSS_MediaFeatureID_cpp
+    MAIN_DEPENDENCY CSS/MediaFeatures.json
+)
+add_custom_target(generate_MediaFeatureID.cpp DEPENDS CSS/MediaFeatureID.cpp)
+add_dependencies(all_generated generate_MediaFeatureID.cpp)
+
 add_custom_command(
     OUTPUT CSS/PropertyID.h
     COMMAND ${CMAKE_COMMAND} -E make_directory CSS