Is er een manier om voorwaardelijke instructies in CSS te gebruiken?
Antwoord 1, autoriteit 100%
Nee. Maar kun je een voorbeeld geven wat je in gedachten hebt? Welke voorwaardewil je controleren?
Misschien Sassof Kompaszijn interessant voor u.
Citaat van Sass:
Sass maakt CSS weer leuk. Sass is CSS, plus geneste regels, variabelen, mixins en meer, allemaal in een beknopte, leesbare syntaxis.
Antwoord 2, autoriteit 90%
Ik zou zeggen dat het dichtst bij “ALS” in CSS komt, mediaquery’s, zoals die u kunt gebruiken voor responsief ontwerp. Met mediaquery’s zeg je dingen als: “Als het scherm tussen 440px en 660px breed is, doe dit dan”. Lees hier meer over mediaquery’s: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp, en hier is een voorbeeld van hoe ze eruit zien:
@media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
Dat is ongeveer de omvang van “IF” binnen CSS, behalve om over te gaan naar SASS/SCSS (zoals hierboven vermeld).
Ik denk dat je het beste kunt doen om je klassen / ID’s in de scripttaal te wijzigen en vervolgens elk van de klasse/ID-opties in je CSS te behandelen. In PHP kan het bijvoorbeeld zoiets zijn als:
<?php
if( A > B ){
echo '<div class="option-a">';
}
else{
echo '<div class="option-b">';
}
?>
Dan kan je CSS zijn als
.option-a {
background-color:red;
}
.option-b {
background-color:blue;
}
Antwoord 3, autoriteit 29%
De enige voorwaarden die beschikbaar zijn in CSS zijn selectorsen @media. Sommige browsers ondersteunen enkele van de CSS 3-selectorsen mediaquery’s.
Je kunt een element met JavaScript wijzigen om te wijzigen of het overeenkomt met een selector of niet (bijvoorbeeld door een nieuwe klasse toe te voegen).
Antwoord 4, autoriteit 29%
De @supportsregel (92% browserondersteuning juli 2017 ) regel kan worden gebruikt voor voorwaardelijke logica op css-eigenschappen:
@supports (display: -webkit-box) {
.for_older_webkit_browser { display: -webkit-box }
}
@supports not (display: -webkit-box) {
.newer_browsers { display: flex }
}
Antwoord 5, autoriteit 29%
CSS zelf heeft geen voorwaardelijke instructies, maar hier is een hack met aangepaste eigenschappen(ook bekend als “css-variabelen”).
In dit triviale voorbeeld wil je een opvulling toepassen op basis van een bepaalde voorwaarde, zoals een “if”-statement.
:root { --is-big: 0; }
.is-big { --is-big: 1; }
.block {
padding: calc(
4rem * var(--is-big) +
1rem * (1 - var(--is-big))
);
}
Dus elke .blockdat is een .is-bigof dat is een afstammeling van een zal een opvulling van 4rem hebben, terwijl alle andere blokken slechts 1rem hebben. Nu noem ik dit een “triviaal” voorbeeld omdat het zonder de hack kan worden gedaan.
.block {
padding: 1rem;
}
.is-big .block,
.block.is-big {
padding: 4rem;
}
Maar ik zal zijn aanvragen aan uw verbeelding achterlaten.
6, Autoriteit 12%
Ik zou beweren dat u kunt gebruiken als uitspraken in CSS. Hoewel ze niet als zodanig zijn geformuleerd. In het onderstaande voorbeeld, heb ik gezegd dat als de check-box is gecontroleerd, ik wil dat de achtergrond is gewijzigd in wit. Als u een werkvoorbeeld wilt bekijken www.armstrongdes.com . Ik heb dit gebouwd voor een klant. Grootte uw venster zodat de mobiele navigatie het overneemt en op de NAV-knop klikt. Alle CSS. Ik denk dat het veilig is om te zeggen dat dit concept voor veel dingen kan worden gebruikt.
#sidebartoggler:checked + .page-wrap .hamb {
background: #fff;
}
// example set as if statement sudo code.
if (sidebaretoggler is checked == true) {
set the background color of .hamb to white;
}
Antwoord 7, autoriteit 6%
css-bestanden ondersteunen geen voorwaardelijke instructies.
Als je wilt dat iets er op twee manieren uitziet, afhankelijk van een bepaalde voorwaarde, geef het dan een geschikte klasse met behulp van je server-side scripttaal of javascript. bijv.
<div class="oh-yes"></div>
<div class="hell-no"></div>
Antwoord 8, autoriteit 6%
Er is geen native IF/ELSE voor CSS beschikbaar. CSS-preprocessors zoals SASS(en Compass) kunnen helpen, maar als u op zoek bent naar meer functiespecifieke if/ andere voorwaarden moet u Modernizreens proberen. Het doet functiedetectie en voegt vervolgens klassen toe aan het HTML-element om aan te geven welke CSS3 & HTML5-functies die de browser wel en niet ondersteunt. U kunt dan zeer if/else-achtige CSS rechtstreeks in uw CSS schrijven zonder enige voorbewerking, zoals dit:
.geolocation #someElem {
/* only apply this if the browser supports Geolocation */
}
.no-geolocation #someElem {
/* only apply this if the browser DOES NOT support Geolocation */
}
Houd er rekening mee dat je altijd progressief moet verbeteren, dus in plaats van het bovenstaande voorbeeld (dat het punt beter illustreert), zou je iets meer als dit moeten schrijven:
#someElem {
/* default styles, suitable for both Geolocation support and lack thereof */
}
.geolocation #someElem {
/* only properties as needed to overwrite the default styling */
}
Merk op dat Modernizr vertrouwt op JavaScript, dus als JS is uitgeschakeld, zou u niets krijgen. Vandaar de progressieve verbeteringsbenadering van #someelem eerst, als no-JS Foundation.
9
Uw CSS-bestand wijzigen naar een SCSS-bestand zou u in staat stellen om de truc te doen. Een voorbeeld in hoek zou zijn om een ngclass te gebruiken en dat uw SCSS eruit ziet:
.sidebar {
height: 100%;
width: 60px;
&.is-open {
width: 150px
}
}
10
Hoewel dit als een beetje een hack aanvoelt, en mogelijk niet perfect in alle browsers werkt, combineert een methode die ik onlangs heb gebruikt het feit dat CSS (tenminste in chroom) ongeldige waarden op eigenschappen en wij lijkt te negeren Kan aangepaste eigenschappen instellen die terugvallen op hun standaardwaarde wanneer deze ongeldig is.
(Opmerking: ik heb dit niet diep getest, dus behandel het als een hacky bewijs van concept / mogelijk idee)
Het volgende is geschreven in SCSS, maar het moet net zo goed werken in standaard CSS:
.hero-image {
// CSS ignores invalid property values
// When this var is set to an image URL, the browser will ignore it
// When this var isn't set, then we will use the default fallback for the var, which is 'none'
display: var(--loading-page-background-image, none);
// This part isn't directly relevant to my 'if' example, but shows how I was actually using this custom property normally
background-image: var(--loading-page-background-image, none);
}
Ik zet het aangepaste eigendom van Javascript / React, maar het zou waarschijnlijk werken, ongeacht hoe u het instelt:
// 'true' case
const chosenLoaderUrl = "https://www.example.com/loader.png";
// 'false' case
//const chosenLoaderUrl = "";
// containerRef is just a reference to the div object, you could get this with
// jquery or however you need. Since I'm in React, I used useRef() and attached
// that to my div
containerRef.current.style.setProperty(
"--loading-page-background-image",
`url(${chosenLoaderUrl})`
);
Wanneer chosenLoaderUrlis ingesteld op mijn URL, is dat URL een ongeldige waarde voor de displayProperty, dus het lijkt te worden genegeerd.
Wanneer chosenLoaderUrlis ingesteld op een lege waarde, valt het terug naar de standaardwaarde in mijn var()Verklaring, dus stelt u displaynaar none
Ik weet niet zeker hoe ‘GeneralISable’ dit concept het, maar bedacht, ik zou het aan de andere suggesties toevoegen voor het geval het nuttig is voor iedereen.
11
Uw stylesheet moet worden beschouwd als een statische tabel met beschikbare variabelen die uw HTML-document kan oproepen op basis van wat u moet weergeven. De logica moet in uw JavaScript en HTML staan, gebruik JavaScript om kenmerken dynamisch toe te passen op basis van voorwaarden als u echt nodig hebt. Stylesheets zijn niet de plaats voor logica.
12
Nee, u kunt niet doen als in CSS, maar u kunt kiezen welk stijlblad u
gebruikt
Hier is een voorbeeld:
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
alleen voor IE 6 wordt gebruikt, hier is de website waar het vandaan komt http://www .quirksmode.org/css/condcom.html, alleen IE heeft voorwaardelijke opmerkingen. Andere browsers niet, hoewel er enkele eigenschappen zijn die u kunt gebruiken voor Firefox die begint met -moz of voor safari die begint met -webkit. Je kunt javascript gebruiken om te detecteren welke browser je gebruikt en javascript gebruiken voor welke acties je ook wilt uitvoeren, maar dat is een slecht idee, omdat het kan worden uitgeschakeld.