[Update] May 11, 2026
Hey Creators!
We’re excited to announce StyleQuery, a powerful upgrade to the Roblox Styling system. Think of StyleQuery as the engine’s version of CSS media and container queries combined into one – it allows your UI to automatically adapt to real-time conditions.
What’s New?
-
Responsive Layout Conditions: Define style rules that trigger based on an element’s size or aspect ratio. Perfect for building “container-responsive” UI that looks great on any screen. -
Built-in Global & Accessibility Queries: Instantly adapt your interface based on the user’s viewport size (Small, Medium, Large), their current input (Keyboard, Touch, Gamepad), or their reduced motion preferences. -
Enhanced Pseudoinstance Styling: To support StyleQueries and other UI primitives, you can now style multiple pseudoinstances or nested pseudoinstances within a StyleRule.
Keep reading for more details on how to try these out 
How to Enable the Beta
- Navigate to File > Beta Features.
- Find and check the box for StyleQuery.
- Restart Roblox Studio when prompted.
What is a StyleQuery?
A StyleQuery is a new instance that you parent to any GuiBase2d element (Frame, TextLabel, ScrollingFrame, etc.). It monitors a set of conditions you define, and exposes a read-only IsActive property that is true when all conditions are met.
When a StyleQuery is active, its name can be used as a selector in StyleRules to conditionally apply styles – making your UI responsive without writing a single line of code in a Script. You can define selectors based on layout conditions, or you can use one of our built-in global device/accessibility queries:
- Layout conditions include MinSize, MaxSize, and AspectRatioRange.
- Global device queries include ViewportDisplaySize, PreferredInput, and ReducedMotionEnabled.
The @ selector prefix is how StyleRules reference active queries. You can combine query selectors with class, name, and tag selectors to reference specific StyleRules.
Using StyleQueries to Build Cross-Platform UI
StyleQueries make it easier for you to build cross-platform functionality into the foundation of your UI. Let’s walk through an example of how to do this. Everything shown below is embedded within this sample placefile, which has more examples for you to explore!
One important pillar of cross-platform development is making sure on-screen UI reflects the proper input device, which is especially important for assistive input hints. You can use the built-in PreferredInput selector to style your UI accordingly.
-
Create a styled parent container that includes an image label for the input hint, a text label that displays the instruction for the player to follow, and a layout that ensures these render in the right order. For details on how we styled ours, take a look inside the Style Editor of the linked placefile above – this uses general Styling technology we released last year.
-
We want ImageLabel #InputImage to change based on the input device connected. We can set styles for properties that stay consistent regardless of input device (like BackgroundTransparency or Size) under the StyleRule itself.
-
Now, we’ll add StyleQueries to dynamically change the image that populates inside the ImageLabel. Inside the ImageLabel #InputImage rule, click New > StyleQuery. For ease of use, change the pseudoinstance Selector name to the PreferredInput it represents (e.g., ::StyleQuery #Touch), then set its corresponding condition. In the StyleRule underneath the StyleQuery (e.g., @Touch), set the image property you want applied when the conditions are met.
Note: The Queries folder shown in the editor was manually created for organization, but is not necessary for the functionality.
-
Alternatively, for some queries (like PreferredInput), we added these natively as built-in queries so you can access them easier! Simply click New > Empty Rule. Change the selector to the following and add the corresponding image property.
Now, your UI will change depending on which input device is connected!
| PreferredInput | KeyboardAndMouse | Touch | Gamepad |
|---|---|---|---|
| Style |  |
 |
 |
You can do this using scripts as well! Here’s an example of how to implement the same PreferredInput StyleQueries we showed above using a script-first workflow.
Get your script set up!
In Explorer, create the following
- StyleSheet instance named CoreSheet inside ReplicatedStorage.
- ScreenGui container in StarterGui.
- StyleLink object inside the ScreenGui whose StyleSheet property is linked to CoreSheet.
- LocalScript instance inside the ScreenGui.
LocalScript code
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local coreSheet = ReplicatedStorage:FindFirstChild("CoreSheet")
local screenGui = script.Parent
-- 1. Create the UI Hierarchy
local inputHint = Instance.new("Frame")
inputHint.Name = "InputHint"
inputHint.Parent = screenGui
local inputImage = Instance.new("ImageLabel")
inputImage.Name = "InputImage"
inputImage.Parent = inputHint
local hintText = Instance.new("TextLabel")
hintText.Name = "HintText"
hintText.Parent = inputHint
-- 2. Define Styling Rules
-- Main Container
local hintRule = Instance.new("StyleRule")
hintRule.Selector = "#InputHint"
hintRule.Parent = coreSheet
hintRule:SetProperties({
AnchorPoint = Vector2.new(0.5, 1),
BackgroundColor3 = Color3.fromHex("#1e1e1e"),
BackgroundTransparency = 0.4,
Position = UDim2.new(0.5, 0, 1, -20),
Size = UDim2.fromOffset(250, 60)
})
-- Layout (PseudoInstance)
local layoutRule = Instance.new("StyleRule")
layoutRule.Selector = "::UIListLayout"
layoutRule.Parent = hintRule
layoutRule:SetProperties({
FillDirection = Enum.FillDirection.Horizontal,
HorizontalAlignment = Enum.HorizontalAlignment.Center,
VerticalAlignment = Enum.VerticalAlignment.Center,
ItemLineAlignment = Enum.ItemLineAlignment.Center,
Padding = UDim.new(0, 15),
SortOrder = Enum.SortOrder.LayoutOrder
})
-- Text Label
local textRule = Instance.new("StyleRule")
textRule.Selector = ">TextLabel #HintText"
textRule.Parent = hintRule
textRule:SetProperties({
AutomaticSize = Enum.AutomaticSize.X,
BackgroundTransparency = 1,
FontFace = Font.fromName("PressStart2P"),
LayoutOrder = 2,
Size = UDim2.fromScale(0, 1),
Text = "TO JUMP",
TextColor3 = Color3.fromHex("#ffffff"),
TextSize = 35,
TextXAlignment = Enum.TextXAlignment.Center
})
-- Image Label (Base)
local imageRule = Instance.new("StyleRule")
imageRule.Selector = ">ImageLabel #InputImage"
imageRule.Parent = hintRule
imageRule:SetProperties({
BackgroundTransparency = 1,
LayoutOrder = 1,
Size = UDim2.fromOffset(50, 50)
})
-- 3. Define Input Queries (Nested under ImageLabel)
local touchQuery = Instance.new("StyleRule")
touchQuery.Selector = "@PreferredInputTouch"
touchQuery.Parent = imageRule
touchQuery:SetProperties({ Image = "rbxassetid://15013358383" })
local gamepadQuery = Instance.new("StyleRule")
gamepadQuery.Selector = "@PreferredInputGamepad"
gamepadQuery.Parent = imageRule
gamepadQuery:SetProperties({ Image = "rbxassetid://110536967680292" })
local kbQuery = Instance.new("StyleRule")
kbQuery.Selector = "@PreferredInputKeyboardAndMouse"
kbQuery.Parent = imageRule
kbQuery:SetProperties({ Image = "rbxassetid://7031568679" })
More Powerful Pseudoinstance Styling
We’ve also expanded our support for pseudoinstance Styling to not only support StyleQueries, but all pseudoinstances in general!
Multiple pseudoinstances
You can now style multiple pseudoinstances per each type of styled element. This has been heavily requested for adding multiple UIStrokes, and this will also be useful for new UI primitives that will be released in the future.
Nested pseudoinstances
You can also style pseudoinstances that are nested within each other! This allows you to style things like nested UIStrokes and UIGradients, or UIConstraints under a UIGridLayout.
Release Notes
-
Setting a StyleQuery condition for MaxSize, MinSize, or AspectRatioRange and styling the size in the corresponding query StyleRule may result in flickering since this will trigger StyleQuery re-evaluation. Avoid creating conditions and query styles that conflict with each other.
-
Using StyleQuery over normal local scripts should not impact performance / memory much. Be mindful of having too many StyleQueries under one instance, and use builtin selectors (“@ViewportDisplaySizeSmall”) when possible.
Made with love
New Styling features were made possible thanks to @Thunderbolt5140, @theburgerkingbuilder, @uiuxartist, @DrRanchDressing, @MetaVars, @0xabcdef1234, @IgnisRBX, and our intern! We also want to give a huge thank you to our early testers who gave us feedback along the way.
While you’re testing out StyleQueries, we’ll continue building the next set of UI primitives and styling features to ensure you have the best systems for your UI projects.
We can’t wait to hear your thoughts and see all the amazing things you create! We’ll keep you updated once this feature goes live on Client. Let us know about your experience and if you encounter any issues! 
