Day: September 22, 2021

Posted on

Container Units Should Be Pretty Handy

Category Image 052

Container queries are going to solve this long-standing issue in web design where we want to make design choices based on the size of an element (the container) rather than the size of the entire page. So, if a container is 600px wide, perhaps it has a row-like design, but any narrower than that it has a column-like design, and we’ll have that kind of control. That’s much different than transitioning between layouts based on screen size.

We can already size some things based on the size of an element, thanks to the % unit. For example, all these containers are 50% as wide as their parent container.

The % here is 1-to-1 with the property in use, so width is a % of width. Likewise, I could use % for font-size, but it will be a % of the parent container’s font-size. There is nothing that lets me cross properties and set the font-size as a % of a container’s width.

That is, unless we get container units! Here’s the table of units per the draft spec:

unitrelative to
qw1% of a query container’s width
qh1% of a query container’s height
qi1% of a query container’s inline size
qb1% of a query container’s block size
qminThe smaller value of qi or qb
qmaxThe larger value of qi or qb

With these, I could easily set the font-size to a percentage of the parent container’s width. Or line-height! Or gap! Or margin! Or whatever!

Miriam notes that we can actually play with these units right now in Chrome Canary, as long as the container queries flag is on.

I had a quick play too. I’ll just put a video here as that’ll be easier to see in these super early days.

And some great exploratory work from Scott here as well:

Ahmad Shadeed is also all over this!

Query units can save us effort and time when dealing with things like font-size, padding, and margin within a component. Instead of manually increasing the font size, we can use query units instead.

Ahmad Shadeed, “CSS Container Query Units”

Maybe container queries and container units will drop for real at the same time. 🤷

The post Container Units Should Be Pretty Handy appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Posted on

<how to solve this question>

Category Image 006

I have a problem to do price data and i don’t know to insert it into the coding

this is question
Screenshot_2021-09-23_015318.png

this is the coding that i have made

<?php

$page_title = 'Yoho Express!';

include ('includes/header.html');

?>
<form action="q2.php" method="post">
<p><h1><fieldset><legend>Enter your information in the form below:</legend></p></h1>
<p><b>Departure day:</b> 
<?php

//This programme is display in an array.
$day = array (1 =>'Select',
                  'Saturday', 
                  'Sunday', 
                  'Monday', 
                  'Tuesday',
                  'Wednesday', 
                  'Thursday', 
                  'Friday');
//the programme is display using the pull-down menu.
echo '<select name="day">';
foreach ($day as $key => $value) {
echo "<option value=\"$value\">$value</option>\n";
}
echo '</select>';

?></p>
<p><b>Departure time:</b>
<?php

//This programme is display in an array.
$time = array (1=>'Select',
                   '7:00', 
                   '10:00', 
                   '13:00', 
                   '16:00', 
                   '21:00');
//the programme is display using the pull-down menu.
echo '<select name="time">';
foreach ($time as $key => $value) {
echo "<option value=\"$value\">$value</option>\n";
}
echo '</select>';
?>
</fieldset>
 <b><p><div align="left"><input type="submit" name="submit" value="Book" /></div></b></p>
</form>

<?php
if($_SERVER['REQUEST_METHOD']=='POST'){
//handler
// Validate day
if (!empty($_POST['day'])) {
 $day = $_POST['day'];
} else {
 $day = NULL;
 echo '<p><b><font color="purple">You forgot to enter your departure day!</b></p>';
}

// Validate time
if (!empty($_POST['time'])) {
 $time = $_POST['time'];
} else {
 $time = NULL;
 echo'<p><b><font color="purple">You forgot to enter your departure time!</b></p>';
}

// Validate price
if (!empty($_POST['price'])) {
    $price = $_POST['price'];
   } else {
    price= NULL;
   }

// If everything is okay, print the message.
if ($day && $time  && $price) {
 // Print the submitted information.
  echo "<b><font color='purple'>Below are your bus ticket details </font></b></p>
 <br /><b>Day:</b>$day
 <br /><b>Time:</b>$time
 <br /><b>Price No:</b>$price";
} else {
 // One form element was not filled out properly.
 echo '<p><font color="red">Please go back and fill out the form again.</font></p>';
}
}

include('includes/footer.html');
?>