Izveidojiet CSS daudzuma vaicājumus ar QQ Builder
Daži izstrādātāji zina vai lieto CSS daudzuma vaicājumi to tīmekļa vietnēs. Tā ir diezgan sarežģīta funkcija, bet arī noderīga, kad jūs konteinerā ir dažādi priekšmeti.
Daudzuma vaicājums var mainīt / atjaunināt CSS rekvizītus balstoties uz iepriekš noteikti bērnu elementu ierobežojumi. Piemēram, ja jums ir vairāk nekā trīs vienumi sarakstā jūs varat padarīt fontu mazāku, lai ietaupītu telpu. Vēl viens piemērs ir atjauninot saites platumu pamatojoties uz saites skaits navigācijas izvēlnē.
Šie uzdevumi var būt ātri nokļūt sarežģīti bet pateicoties Daudzuma vaicājumu veidotājs jums nav nepieciešams iegaumēt neskaidru sintaksi.
Šī tīmekļa lietotne ģenerē visu kodu lai ietaupītu laiku. Tev vajag izvēlieties no trim nolaižamajām izvēlnēm kas pielāgo jūsu daudzuma vaicājumu. Viņi strādā šādi:
- Selektors - kura bērna elements (-i) būtu jāaprēķina
- Vaicājuma veids - izvēlēties “ne vairāk kā”, “vismaz”, vai “ne vairāk kā” & “vismaz”
- Summa - kopējais filtrējamo vienumu skaits
Tas, šķiet, ir mulsinoši, bet tas ir patiešām vienkāršs jēdziens. Daudzuma vaicājumi ļauj piemērot CSS īpašības pamatojoties uz kopējo bērnu elementu skaitu.
Tad tu vari pievienot dažus CSS stilus kad ir, teiksim, vismaz 4 bērnu elementi (4 vai vairāk). Vai arī jūs varētu pievienot stilus tikai tad, kad tur ir ne vairāk kā 4 bērnu elementi (0-4 bērni).
Combo selektors ļauj jums noteikt tieši cik daudz minimālo un maksimālo bērnu ir nepieciešami, lai parādītu noteiktas CSS īpašības.
Iepriekš attēlā redzamajā piemērā esmu iestatījis Kopā “ne vairāk kā” vienumus Tas nozīmē, ka, ja man ir 0, 1 vai 2 bērni, bloki ir sarkani. Ja es pievienoju vēl vienu, lai saņemtu 3 bērnus, tad visi bloki kļūst zili.
Ja jums nav ne jausmas, kas notiek, jūs varat noklikšķiniet uz mazās informācijas lodziņa sānjoslā. Tas parādīs modālais logs ar faktiem un sintaksi daudzuma vaicājuma funkcijas izskaidrošana.
Tas ir ļoti ērts līdzeklis gan iesācējiem, gan pieredzējušiem izstrādātājiem. Tas būs ietaupīt daudz laika ilgtermiņā un tas jums palīdzēs izveidot dinamiskākas tīmekļa vietnes.
Lai sāktu darbu, apmeklējiet vietni QQ celtnieks un sākt pielāgot savas funkcijas. Jūs varat rotaļlietu ar rezultātiem un pārbaudiet tiešo priekšskatījumu labajā rūtī, lai uzzinātu, kā izmaiņas ietekmē bērna elementus.
Šis projekts ir arī pieejams GitHub lai jūs būtu brīvi pārbaudiet avota kodu vai pat lejupielādējiet kopiju lokāli. Un, ja jums patīk šī lietotne vai jums ir radušies jautājumi / ieteikumi radītājam Drew Minns, jūs varat atvašu viņu ātru čivināt @drewisthe.
