CSS Karşılaştırmaları | Dokümantasyon

Çoğu CSS kavramı, Roblox stil kavramlarıyla eşleşir. Aşağıdaki örnekler, CSS ve HTML'nin Luau ve Roblox sınıfları/özellikleriyle nasıl hizalandığını göstermektedir.

Aşağıdaki Luau script örneklerini test etmek için:

Explorer'da aşağıdakileri oluşturun:
1. StyleSheet örneği ReplicatedStorage içinde.
2. ScreenGui konteyneri StarterGui içinde.
3. LocalScript örneği ScreenGui içinde.
4. StyleLink nesnesi ScreenGui içinde.

LocalScript içinde, aşağıdaki destekleyici kodu yapıştırın:

LocalScript

local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local coreSheet = ReplicatedStorage:FindFirstChildWhichIsA("StyleSheet")
local screenGui = script.Parent
local styleLink = screenGui:FindFirstChildWhichIsA("StyleLink")
styleLink.StyleSheet = coreSheet

Aşağıdaki her örnek için, destekleyici satırların 1-7'sinden sonra Luau kod satırlarını yapıştırın.

Seçiciler

Selector özelliği, bir StyleRule'ın hangi örnekleri etkilemesi gerektiğini belirtir. Aşağıdaki seçici türleri CSS'den Luau'ya geçiş yapar ve kombinatorlerle kullanılabilir.

Eleman

CSS eleman seçicilerine eşdeğer olan Roblox sınıf seçicileri, belirli bir GuiObject sınıfının tüm örneklerini seçer; örneğin Frame, ImageLabel, TextButton vb.

CSS

button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 15%;
	height: 40px;
	border: none;
}

HTML

<button>Ana Menü</button>

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "TextButton" -- Roblox sınıf seçici
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.15, 0, 0, 40),
	BorderSizePixel = 0
})

local button = Instance.new("TextButton")
button.Text = "Ana Menü"
button.Parent = screenGui

Sınıf

Roblox'un CSS class seçicilerine eşdeğeri etiket seçicileridir ve CollectionService aracılığıyla uygulanan etiketler kullanır.

CSS

.button-primary {
	background-color: #335FFF;
	color: #E1E1E1;
}

HTML

<button class="button-primary">Ana Menü</button>

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = ".ButtonPrimary" -- Roblox etiket seçici
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	AutomaticSize = Enum.AutomaticSize.XY
})

local button = Instance.new("TextButton")
button.Text = "Ana Menü"
button.Parent = screenGui
-- Butona etiket uygula
CollectionService:AddTag(button, "ButtonPrimary")

Tanımlayıcı

CSS id'ye en yakın Roblox karşılaştırması, #[name] seçicisidir ve Instance.Name değerine göre seçim yapar. W3C spesifikasyonundaki id niteliğinden farklı olarak, isimlerin benzersiz olması beklenmez.

CSS

#modal-frame {
	background-color: #000022;
	opacity: 0.5;
	width: 50%;
	min-height: 100px;
}

HTML

<div id="modal-frame"></div>

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "#ModalFrame" -- Örnek adı seçici
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("000022"),
	BackgroundTransparency = 0.5,
	Size = UDim2.new(0.5, 0, 0, 100),
	AutomaticSize = Enum.AutomaticSize.Y
})

local frame = Instance.new("Frame")
frame.Parent = screenGui
-- Seçiciyle eşleşmesi için çerçeveyi yeniden adlandır
frame.Name = "ModalFrame"

Kombinatörler

Kombinatörler, temel seçicileri karıştırarak daha derin hiyerarşi ilişkilerini eşleştirmenizi sağlar.

Çocuk

> çocuk seçici, CSS ve Roblox arasında aynıdır.

CSS

.menu-container {
	width: 25%;
}

.menu-container > button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 80%;
	height: 40px;
	border: none;
}

HTML

<div class="menu-container">
	<button>Seçenekler</button>
</div>

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = ".MenuContainer > TextButton" -- Çocuk seçici
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.8, 0, 0, 40),
	BorderSizePixel = 0
})

-- Menü konteynerini oluştur
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Etiket uygula
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Butonu oluştur
local button = Instance.new("TextButton")
button.Text = "Seçenekler"
-- Butonun ebeveyni olarak menü konteynerini ayarla
button.Parent = menuContainer

Soylu

CSS boşluk sözdiziminden farklı olarak, örneğin .menu-container button burada görüldüğü gibi, Roblox, bir soyul ilişkiyi belirtmek için >> kombinatorünü kullanır.

CSS

.menu-container {
	width: 25%;
}

.sub-container {
	width: 75%;
}

.menu-container button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 80%;
	height: 40px;
	border: none;
}

HTML

<div class="menu-container">
	<div class="sub-container">
		<button>Seçenekler</button>
	</div>
</div>

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = ".MenuContainer >> TextButton" -- Soylu seçici
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.8, 0, 0, 40),
	BorderSizePixel = 0
})

-- Menü konteynerini oluştur
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Etiket uygula
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Alt konteyneri oluştur
local subContainer = Instance.new("Frame")
subContainer.Size = UDim2.new(0.75, 0, 0, 0)
subContainer.AutomaticSize = Enum.AutomaticSize.Y
-- Menü konteynerini alt konteynerin ebeveyni olarak ayarla
subContainer.Parent = menuContainer

-- Butonu oluştur
local button = Instance.new("TextButton")
button.Text = "Seçenekler"
-- Alt konteyneri butonun ebeveyni olarak ayarla
button.Parent = subContainer

Seçici listesi

Birden fazla seçici (kombinatörlerle birlikte olanlar dahil) aynı özellik bloğuyla tanımlanabilir ve virgülle ayrılarak tekrarı azaltabilir.

CSS

img, p {
	background-color: #FF0033;
}

HTML

<img src="gear.png" width="100" height="100">

<p>Ana Menü</p>

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "ImageLabel, TextLabel" -- Resim etiketleri VE metin etiketleri için seçici
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))

-- Resim etiketini oluştur
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.Parent = screenGui

-- Metin etiketini oluştur
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 0, 0)
textLabel.AutomaticSize = Enum.AutomaticSize.Y
textLabel.TextXAlignment = Enum.TextXAlignment.Left
textLabel.TextYAlignment = Enum.TextYAlignment.Top
textLabel.Text = "Ana Menü"
textLabel.Parent = screenGui

Pseudo-sınıflar

Roblox'un CSS pseudo-sınıf seçicilerine eşdeğeri durum seçicileridir ve Enum.GuiState değerlerinden biri olan Hover veya Press ile ilişkilidir.

CSS

img:hover {
	opacity: 0.5;
}

HTML

<img src="gear.png" width="100" height="100">

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "ImageLabel:Hover" -- Durum seçici
rule:SetProperty("ImageTransparency", 0.5)

-- Resim etiketini oluştur
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.BackgroundTransparency = 1
imageLabel.Parent = screenGui

CSS pseudo-elementleri belirli bir öğenin belirli kısımlarını değiştirebileceği gibi, Roblox da bir stil kuralının Selector özelliği aracılığıyla hayali UIComponents oluşturabilir. Örneğin, aşağıdaki kural, RoundedCorner20 etiketiyle işaretlenmiş her Frame altında etkili bir şekilde bir UICorner modifikasyonu oluşturur ve her modifikatörün CornerRadius değerini 20 piksel olarak ayarlar.

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "Frame.RoundedCorner20::UICorner" -- UI bileşeni seçici
rule:SetProperty("CornerRadius", UDim.new(0, 20))

-- Çerçeve oluştur
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0.4, 0, 0.2, 0)
frame.Parent = screenGui
-- Çerçeveye etiket uygula
CollectionService:AddTag(frame, "RoundedCorner20")

Sorgular

Roblox stil sorguları, CSS medya sorguları ve konteyner sorguları arasındaki boşluğu kapatır. @ ön ekini kullanarak, stilleri ebeveyn boyutlarına, giriş cihazı türlerine veya kullanıcı erişilebilirlik ayarlarına göre değiştirebilirsiniz.

CSS'de, @container stilleri bir ebeveyn öğesinin boyutuna göre uygular. Roblox'ta, bir koşulun Selector özelliği için bir tanımlayıcı kullanarak ::StyleQuery ile bir hayali örnek sorgusu tanımlarsınız; örneğin "::StyleQuery #WideContainer", ardından ebeveynin GuiObject.AbsoluteSize değerini değerlendirmek için "MinSize" gibi bir StyleQuery koşul adı ile birlikte. Daha sonra, sorgu aktif olduğunda örneğe veya çocuklarına stiller uygulamak için, @[identifier] ön eki ile bir StyleRule oluşturursunuz; örneğin @WideContainer.

CSS

.container {
	container-type: inline-size;
	background-color: rgba(0, 0, 34, 0.5);
}
button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 75%;
	height: 40px;
	border: none;
}

@container (min-width: 400px) {
	button {
		background-color: #cc0033;
	}
}

HTML

<div class="container" style="width: 80%; height: 200px;">
	<button>Ana Menü</button>
</div>

Luau

-- Konteyner kuralı
local containerRule = Instance.new("StyleRule")
containerRule.Selector = "Frame" -- Roblox sınıf seçici
containerRule:SetProperties({
	BackgroundColor3 = Color3.fromRGB(0, 0, 34),
	BackgroundTransparency = 0.5,
	BorderSizePixel = 0
})
containerRule.Parent = coreSheet

-- Buton kuralı
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- Roblox sınıf seçici
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.75, 0, 0, 40),
	BorderSizePixel = 0
})
buttonRule.Parent = containerRule -- Konteyner kuralının çocuğu

-- Sorgu koşulu (#WideContainer)
local queryCondition = Instance.new("StyleRule")
queryCondition.Selector = "::StyleQuery #WideContainer"
queryCondition:SetProperty("MinSize", Vector2.new(400, 0))
queryCondition.Parent = containerRule -- Konteyner kuralının çocuğu

-- Koşul aktif olduğunda uygulanan kural (@WideContainer)
local queryStyle = Instance.new("StyleRule")
queryStyle.Selector = "@WideContainer Frame > TextButton" -- Çocuk seçici
queryStyle:SetProperty("BackgroundColor3", Color3.fromHex("CC0033"))
queryStyle.Parent = containerRule -- Konteyner kuralının çocuğu

-- Örnekleri oluştur
local container = Instance.new("Frame")
container.Size = UDim2.new(0.8, 0, 0, 200)
container.Parent = screenGui
local button = Instance.new("TextButton")
button.Text = "Ana Menü"
button.Parent = container

Roblox ayrıca, ViewportDisplaySize veya ReducedMotionEnabled gibi küresel ortam durumlarına doğrudan karşılık gelen yerleşik sorgular sağlar. Bunlar ::StyleQuery tanımı gerektirmez ve doğrudan @ ön eki ile kullanılabilir.

CSS Medya Özelliği	Roblox Stil Sorgu Seçici
(max-width: 600px)	@ViewportDisplaySizeSmall
(min-width: 601px) and (max-width: 1200px)	@ViewportDisplaySizeMedium
(min-width: 1201px)	@ViewportDisplaySizeLarge
(pointer: fine)	@PreferredInputKeyboardAndMouse
(pointer: coarse)	@PreferredInputTouch
(any-pointer: coarse)	@PreferredInputGamepad
(prefers-reduced-motion: reduce)	@ReducedMotionEnabledTrue
(prefers-reduced-motion: no-preference)	@ReducedMotionEnabledFalse

CSS

.container {
	container-type: inline-size;
	background-color: rgba(0, 0, 34, 0.5);
}

@media (prefers-reduced-motion: reduce) {
	.container {
		background-color: rgba(0, 0, 34, 1);
	}
}

HTML

<div class="container" style="width: 80%; height: 200px;">

</div>

Luau

-- Konteyner kuralı
local containerRule = Instance.new("StyleRule")
containerRule.Selector = "Frame" -- Roblox sınıf seçici
containerRule:SetProperties({
	BackgroundColor3 = Color3.fromRGB(0, 0, 34),
	BackgroundTransparency = 0.5,
	BorderSizePixel = 0
})
containerRule.Parent = coreSheet

-- Yerleşik sorgu
local motionRule = Instance.new("StyleRule")
motionRule.Selector = "@ReducedMotionEnabledTrue Frame"
motionRule:SetProperty("BackgroundTransparency", 0)
motionRule.Parent = containerRule -- Konteyner kuralının çocuğu

-- Örnekleri oluştur
local container = Instance.new("Frame")
container.Size = UDim2.new(0.8, 0, 0, 200)
container.Parent = screenGui

Değişkenler

CSS, bir stil sistemi boyunca değişkenler tanımlamanıza ve referans vermenize olanak tanır. Roblox, bunu tokenlar ve örnek nitelikleri sistemi aracılığıyla gerçekleştirir. $ ön ekini kullanarak, stil özelliklerini ayarlarken bir StyleRule veya StyleSheet miras zincirinde tanımlanan niteliklere referans verebilirsiniz.

CSS

:root {
	--button-bg-color: #335FFF;
	--button-text-color: #E1E1E1;
}

button {
	background-color: var(--button-bg-color);
	color: var(--button-text-color);
}

HTML

<button>Ana Menü</button>

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

-- Stil sayfası tokenlarını nitelikler kullanarak ayarla
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))

rule.Selector = "TextButton" -- Sınıf seçici
rule:SetProperties({
	BackgroundColor3 = "$ButtonBgColor",
	TextColor3 = "$ButtonTextColor"
})

-- Butonu oluştur
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.Text = "Ana Menü"
button.Parent = screenGui

Geçişler

CSS geçişler, özellik değerlerini belirli bir süre boyunca tween yapmanıza olanak tanır. Roblox'ta, StyleRule üzerinde SetPropertyTransition() (tek) veya SetPropertyTransitions() (birden fazla) ile özellik geçişleri ayarlayarak bunu gerçekleştirebilirsiniz.

CSS

button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 15%;
	height: 40px;
	border: none;
	transition:
		background-color 1s ease-out,
		transform 1.25s ease-out
}
button:hover {
	background-color: #33AAFF;
	transform: rotate(-5deg);
}

HTML

<button>Ana Menü</button>

Luau

-- Buton kuralı
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- Roblox sınıf seçici
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.15, 0, 0, 40),
	BorderSizePixel = 0
})
-- Özellik geçiş davranışlarını ayarla
buttonRule:SetPropertyTransitions({
	BackgroundColor3 = TweenInfo.new(1, Enum.EasingStyle.Cubic, Enum.EasingDirection.Out),
	Rotation = TweenInfo.new(1.25, Enum.EasingStyle.Cubic, Enum.EasingDirection.Out)
})
buttonRule.Parent = coreSheet

-- Buton hover kuralı
local hoverRule = Instance.new("StyleRule")
hoverRule.Selector = "TextButton:Hover" -- Durum seçici
hoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundColor3 = Color3.fromHex("33AAFF"),
	Rotation = -5
})
hoverRule.Parent = coreSheet

-- Metin butonunu oluştur
local button = Instance.new("TextButton")
button.Text = "Ana Menü"
button.Parent = screenGui

İç içe geçme ve birleştirme

SCSS kavramından ödünç alınarak, StyleRules iç içe geçirilebilir ve seçicileri birleştirilebilir.

SCSS

#menu-frame {
	background-color: #000022;
	width: 25%;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	
	> button {
		background-color: #335FFF;
		color: #E1E1E1;
		width: 80%;
		height: 40px;
		border: none;
		
		&:hover {
			opacity: 0.5;
		}
	}
}

HTML

<div id="menu-frame">
	<button>Şanslar</button>
	<button>Mana</button>
	<button>Parşömenler</button>  
</div>

Luau

-- Menü çerçeve kuralı
local menuFrameRule = Instance.new("StyleRule")
menuFrameRule.Selector = "#MenuFrame"
menuFrameRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("000022"),
	Size = UDim2.new(0.25, 0, 0, 200),
	AutomaticSize = Enum.AutomaticSize.Y
})
menuFrameRule.Parent = coreSheet

-- Menü düzen kuralı
local menuLayoutRule = Instance.new("StyleRule")
menuLayoutRule.Selector = "::UIListLayout"
menuLayoutRule:SetProperties({
	FillDirection = Enum.FillDirection.Vertical,
	VerticalFlex = Enum.UIFlexAlignment.SpaceEvenly,
	HorizontalAlignment = Enum.HorizontalAlignment.Center
})
menuLayoutRule.Parent = menuFrameRule -- Menü çerçeve kuralını ebeveyn olarak ayarla

-- Buton kuralı
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "> TextButton"
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.8, 0, 0, 40),
	BorderSizePixel = 0
})
buttonRule.Parent = menuFrameRule -- Menü çerçeve kuralını ebeveyn olarak ayarla

-- Buton hover kuralı
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Selector = ":Hover"
buttonHoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundTransparency = 0.5,
	TextTransparency = 0.5
})
buttonHoverRule.Parent = buttonRule -- Buton kuralını ebeveyn olarak ayarla

-- Ebeveyn çerçeveyi oluştur
local menuFrame = Instance.new("Frame")
menuFrame.Name = "MenuFrame"
menuFrame.Parent = screenGui

-- Çerçeve içinde butonları oluştur
local button1 = Instance.new("TextButton")
button1.Text = "Şanslar"
button1.Parent = menuFrame
local button2 = Instance.new("TextButton")
button2.Text = "Mana"
button2.Parent = menuFrame
local button3 = Instance.new("TextButton")
button3.Text = "Parşömenler"
button3.Parent = menuFrame