I have a question about cross-browsing / CSS modularization / reactive type.

Asked 2 years ago, Updated 2 years ago, 187 views

Hello, Mr. Yamoo?

I'm Park Sang-joon, and I'm taking a front-end development lecture.

First of all, I want to say thank you for learning a lot thanks to the lecture.

Thank you!

While listening to the lecture, the following matters in practice

I'm leaving a question because I'm curious about how to handle it.

A. Cross-browsing

Different browsers have different engines, so they often show the same HTML and css differently At this time, I'm trying to match it with the browser's core, but is it right to handle it this way? I'm curious. For example, when using flex, IE 11 and 10 are often broken by partial support This is when adjusting using a nucleus such as _:-ms-lang(x), or because the values of margin and padding are different.

B. CSS modularization

I think it would be better to make a module with CSS that will be used a lot like bootstrap, but I don't know the exact name and case of using it as a module, so I want to know what you think and how you use it. Also, I would like to apply it as a module, but please advise me what to do when the design guidelines come out late and only individual page designs come out first.

C. Reactive type 

 1-1. Font
          For fonts, it is better to use rem/em rather than a fixed px 
          I heard that if you use rem, how should you adjust the font size of the root by breakpoint?
          What?

1-2. Image
         You told me that the density is different for each device. Then, if you have a cell phone with a density of 2,3,4 times,
         For each response, I don't think I can respond because only one image is connected
         Then, use @media to decide the resolution star background-img 
         Can I do it? Or is there a better way?

1-3. When using svg 
        As it becomes difficult to respond to each device, it is better to make it into svg except for the actual picture
        Then, image sprite machine, which is a way to minimize network communication, like png 
        Can we apply the law? What do you think?

1-4. Use css units / Fluid design
        As I usually use px, I think I still lack understanding of the design using the ratio.
        If you have the following box model,


        :root {
            font-size:62.5%;
        }

        .containter {
            width : 100%; // 100vw is also possible?
            max-width : 120rem;
            margin: 0 atuo;
            height : 500px; // If we use vh instead of px, should we calculate it like 500/1200?
        }

       .item {
            width: 33.33%; // 33.33vw?
            height: 100%;
        }

       .desc {
            width: 100%;
            height: 50%;
            box-sizing : border-box;
            Padding: I usually used 20px; // px, but if I fix it with rem, should I use 2rem?
        }

        You often used vw and vh in lecture examples, so I hope you can add related css lectures
        C. (ex, ch, etc.)

I felt that there were still many things I didn't know, so I had a lot of questions

Sorry for the long question!

fast-frontend responsive module cross-browsing

2022-09-22 20:28

1 Answers

Hello, Sangjoon. :-)

I'm answering each question you asked.

I prefer to use filtering methods to solve cross-browsing problems, not browser nuclei. A typical filtering library that handles this is Modernizr. The instructions are as follows:

Search for function to filter in Modernizr Download and select.

After selecting all the features you want, press the BUILD button to generate a Modernizr custom code, and download .

Add to load the downloaded Modernizr custom library with the </head> element before <script>.

  ...
  <script src="modernizr-custom.js"></script>
</head>

Next, add class="no-js" to the <html> element. (Purpose to filter that it is a JavaScript-unsupported environment)

<!DOCTYPE html>
<html lang="ko-KR" class="no-js">

If you check the element tab in the browser development tool, <html> Add dynamic filtering to the class attribute, the selected function is set to a value whether the user browser supports it or not. If a feature is not supported, a value with the no- prefix is set .

For browsers that support CSS Flex, flexbox and for browsers that do not support CSS Flex, no-flexbox. The image below is a result of testing in the Chrome browser, so I'm telling you that I'm supporting all of them.

You are now ready to use Modernizr. For the rest of the work, cross-browsing is possible by branching the code through the class set in the <html> element as shown below. :-)

.box {
   /* Designs to be reflected in browsers that support flexbox, rem units */
}

.no-flexbox .box {
   /* Design to reflect on browsers that do not support flexbox */
}

.no-cssremunit .box {
   /* Designs to be reflected in browsers that do not support rem units */
}

You asked me about the situation where I need to name and design the module. Let me tell you a story.

First, naming is a strategy. It's a technique or a method used in operations.

For example, if you listen to a soccer game, each coach uses different tactics. There are tactics that prefer to attack, and there are various tactics such as focusing on defense and seeking counterattacks, and balancing offense and defense.

Similarly, successful projects using CSS require a variety of experiences and effective tactics. While it may be a way to devise new tactics, they require a lot of experience and research, so it may be more effective to introduce and utilize proven tactics.

CSS tactics (methodology) that have already been studied and verified are well known as SMACSS, BEM, Whatever methodology you use, the purpose is the same. Efficient (re)use, Minimize unnecessary , Effective and efficient management etc.

The mentioned CSS naming (tactics) is similar to the object-oriented programming (OOP) methodology. It's about putting objects at the center and thinking about how to solve them. An object is a small functional mass. You can also think of buttons, navigation, tabs, etc. as components of the interface. This is a component or widget.

If you study JavaScript OOP (also called OOJS) in future video lectures, and then think about the CSS methodology again, you will see something that was not visible. :-)

Anyway, after learning based on a proven methodology, it's also good to mix the strengths of each methodology or create new rules by reflecting your experience. In my case, I merge BEM + SMACSS and use it to reflect my experience.

/* Object */
.icon { ... }

/* /* IS */
.icon.is-small { ... }
.icon.is-disabled { ... }
.icon.is-animate { ... }

/* /* HAS */
.icon.has-text { ... }


/* /* Block */
.app-nav { ... }

/* /* Element */
.app-nav__link { ... }

/* /* Modifier (like SMACSS) */
.app-nav__link.has-children { ... }

Modularization is like combining Lego blocks to create various objects. The key is to take each block from multiple objects and configure it to be independent and reusable.

Unfortunately, CSS is a style language, not a programming language. Therefore, programming approach is not allowed 100%. It's This is why programmers hate CSS.

Thinking and programming around objects requires classes, inheritance, subclassing, overriding, encapsulation, and so on, but the CSS can't have... T _T

That's why Sass, LESS, and other processors began to be utilized. The preprocessor can be viewed as a scripting language that extends the CSS. In other words, it extends the capabilities that CSS does not have, making it programmatically stylish.

It's because... To talk about the fact that CSS alone is far from sufficient to properly modularize. Because modularity requires capabilities such as programming languages.

In my case, I use the SAS pre-processor for modularization. Most of the modules I use are a collection of functions, mix-in, and placeholder for reuse. (These are functions supported by Sass.)

The process of writing code with Sass and converting it into CSS using code developed on a module-by-module basis and distributing it. The figure below shows in real time how the SAS code on the left changes when converted to the CSS on the right. You can test it at the sass2css.herokuapp.com site.

Annotating the code you created is as follows: Name and design the module in the BEM + SMACSS combination method described earlier. Sass grammar is influenced by Ruby and is used to omit {}, ;.

// Block
.app-nav
  // Regional Variables
  $gap: 1rem !default

  display: grid
  grid-column-gap: $gap

  // Element
  &__link
    text-decoration: none
    justify-self: center

    // Modifier (like SMACSS)
    &.has-children
      display: grid

Because of this, users who are familiar with CSS sometimes avoid Sass. So Sass also supports a grammar mode called SCSS. Grammar seems to be less repulsive to use both {} and ; like CSS. The code below defines the mix-in using SCSS grammar.

// --------------------------------
// Position mix-in
// --------------------------------
@mixin position($position, $args) {
  position: $position;
  @if $args != null {
    @each $dir in top, left, bottom, right, z-index {
      $i: index($args, $dir);
      @if $i {
        #{$dir}: nth($args, $i + 1);
      }
    }
  }
}

// --------------------------------
// Shortened mix-in
// --------------------------------
@mixin static {
  @include position(static, null);
}

@mixin absolute($args: null) {
  @include position(absolute, $args);
}

@mixin relative($args: null) {
  @include position(relative, $args);
}

@mixin fixed($args: null) {
  @include position(fixed, $args);
}

This defined mix-in can significantly reduce the amount of frequently used code. The code below is the code using the fixed() mix-in and the rem() function.

.app-sticky-widget
  +fixed(top 0 left 0 right 0 z-index 100)
  height: rem(114px)

The above code will be changed to the CSS code as shown below.

.app-sticky-widget {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 7.125rem;
}

If you make and use the CSS Grid mix-in, you will be able to use it as below.

.gallery
  +grid(gap rem(10px) h center v top)
  &.is-4x3 
    +grid-template(r repeat(4, 1fr) c minmax(rem(100px), rem(200px)))

The above code is converted as follows: As you can see, Efficiency and productivity can be maximized if you study and use Sass grammar.

.gallary {
  display: grid;
  grid-gap: 0.625rem;
  justify-items: center;
  align-items: start;
}

.gallary.is-4x3 {
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: minmax(6.25rem, 12.5rem);
}

And the situation where design guidelines come out late, or only individual page designs come out first is because the designer does not know how to design them. It's ironic. I say designer, but not being able to design...

The reason is that Korea's design education reality views visual as a design. System, collaboration, efficiency, productivity, reusable, etc. I've never learned or thought about it, but I'm only obsessed with visible visuals.

I also majored in design as a design student and used to be a designer. My experience in the field was dark. Depends on vague feelings or Plagiarism of what looks good from nowhere... (Famous advertising agency See also ID=13

That's why it feels different when you work with designers who have coded and designers who have coding. Coding means that you have experienced and thought about designing. The experience is also projected into visual design and becomes the driving force for systematic results.

Of course, there should be no misunderstanding. Not all visual designers are concerned about organization, collaboration, efficiency, productivity, and reuse. However, most domestic designers do not. A few are very good designers!

Design is a collection of theories and methodologies that can be systematically learned through learning.If you studied design properly, you would never rely on persimmons or plagiarize them. So why? Do they rely on persimmons or plagiarize? The answer is because there is no system. In other words, there is a lack of training in theory and methodology.

Then I'll get back to the point and say, "Why... Are the design guidelines coming out late, and only individual page designs coming out first?" You don't have to tell me the reason now....

Let me give you an example.

If a person who learned drawing properly, knowledge such as composition, proportion, volume, and texture is organized and implemented using a systematic methodology. In the figure below, we observe (analysis) objects through the sketch process on the left, we create a layout to capture objects in canvas or document, calculate proportions according to the composition, and separate chunks and express textures to express volume. The result is the same as on the right.

But... If you haven't learned or learned properly then you're not in the woods, you're in the woods. You see the non-full part first. No, to be exact! [strong] You can't draw a big picture. Let's look at the picture below. I only described the eyes in detail, but this is the only thing I can't understand. Are you a woman? Is it a man or a young man? Old age, maybe?

It's the same. I'll just give you a part. It can't be modularized even though it's not fully drawn. In short, collaboration is naturally difficult because there is no system, inefficient, and productivity is extreme. In addition, Planning and design are changed from time to time, so even if you modularize it at best, you need to modify it again. The continuous cycle of evil is something that we're talking about this.

So when we talk about the system and talk about it and try to get a better system, negative reactions like, "I didn't have a problem, what do I change?" or "I know it's good, but I can't apply it right away, so later," or "It's been like that."

In other words! Reply (Doing it without changing the way or behavior of the past)

If you look at human society, the tendency is divided into progress and conservative. Of course, there's also a middle ground. That's why there's disagreement, there's conflict, and then there's war.

You asked me what I should do, right?

Sangjoon, I think it should be prioritized to understand what kind of personality you are. You have to understand your tendencies to choose the camp. A criterion for finding and selecting a place to save yourself as much as possible. If you promote development through change, you will have to fulfill your dream in a progressive company, and if you pursue stability rather than change, you will have to preserve your position in a conservative company.

In summary, If you expect collaboration to increase efficiency and maximize productivity by establishing a system where you are staying, you should first talk to your partner who works with you on the project. I'm lucky if I can talk to someone and consult with them. :-) It would be unfortunate if you didn't. :-(

Ah! One more thing is that if you're forced or just throw without resources, you'll feel uncomfortable and dissatisfied with each other. For example, if the goal is to have a system, you should have enough time to understand each other's areas, analyze what you can do together and what you need to do for each other, and then go through trial and error.

It's not easy to have or change the system. You will need to progress gradually over time. In other words, it's going to be a laborious task that requires patience. If you can overcome this, you will have a big commitment, and when you become a leader who leads the team in the future, your leadership will shine even more.

However, if you are considering a position other than where you are currently staying, you should review it closely during the interview while preparing for the job change. It is important to note that you should talk to the people you will work with, not the representative. If you're not given a chance, you should create an opportunity to talk. If you want to have a target system or nest in a potential organization, you need to check and verify. :-)

Next, I'll answer the responsive web design questions.

The font size should be proportional to the distance between the human and the instrument. Desktop screen fonts should be larger than mobile screens such as smartphones.

Why should something far away have a larger font size? It's easy to understand if you compare books and monitors. It's generally farther away from the monitor than from the book. What if the size of the book and the monitor are the same? Monitor letters that are farther away will look smaller. (See figure below) For this reason, the farther away it is, the larger it must be to recognize it as the same size.

When designing a responsive web according to the theory mentioned, if the font size is set in :root element in rem, it can be set in the following way. :-)

[1-19] HTML Embedded Elements<picture> elements discussed in the lecture provide a responsive response. Of course, background images can be utilized.

SVG can also be handled in the Sprite method. Simply create using the GUI tool, using Spritbot to drag & drop individual SVG images to automatically create sprite images (SVG code).

Below is the SVG sprite code generated.


<svg id="svg-sprites">
  <symbol id="icon-1" viewBox="0 0 193 147">
    <g fill="none" fill-rule="evenodd" transform="translate(0 1)">
      <rect width="55" height="53" x="135" y="12" stroke="#306FFD" stroke-width="4" rx="2"/>
      <g stroke="#306FFD" stroke-width="4" transform="translate(0 10)">
        <rect width="55" height="53" x="2" y="2" rx="2"/>
        <rect width="55" height="53" x="2" y="68" rx="2"/>
      </g>
      <g stroke="#306FFD" stroke-width="4" transform="translate(67 10)">
        <rect width="55" height="53" x="2" y="2" rx="2"/>
        <rect width="55" height="53" x="2" y="68" rx="2"/>
      </g>
      <g stroke="#306FFD" stroke-width="4" transform="translate(133 10)">
        <rect width="55" height="53" x="2" y="2" rx="2"/>
        <rect width="55" height="53" x="2" y="68" rx="2"/>
      </g>
      <path stroke="#FF9400" stroke-linecap="square" stroke-width="2" d="M63 0v145" opacity=".6"/>
    </g>
  </symbol>
  <symbol id="icon-2" viewBox="0 0 193 147">
    <g fill="none" fill-rule="evenodd" transform="translate(0 12)">
      ...
    </g>
  </symbol>
  <symbol id="icon-3" viewBox="0 0 193 147">
    <g fill="none" fill-rule="evenodd" transform="translate(0 12)">
      ...
    </g>
  </symbol>
  ...
</svg>

Answer 1: 100vw is not appropriate because the left and right spaces of the container are expected to be set. If you want to set a flexible variable width, you can set it like 10vw and the container 80vw.

Answer 2: If you need to use vh because the viewport height may vary from screen to screen, you should use it with the media query. Set the height according to the minimum height and set the height according to the maximum height

Answer 3: vw is inappropriate for items inside the container. You do not need to use vw or vh. In this case, it is appropriate to use a value relative to the parent width (%.

Answer 4: em is more appropriate than rem for padding. The reason is that the space should be set relatively when the font size becomes larger. If rem is used, it is not relative to the character size because it is relative to the :root element.

.containter {
  width: 100%; /* Answer 1 */
  max-width: 120rem;
  margin: 0 atuo;
  height: 500px; /* Answer 2 */
}

.item {
  width: 33.33%; /* Answer 3 */
  height: 100%;
}

.desc {
  width: 100%;
  height: 50%;
  box-sizing : border-box;
  Padding: 20px; /* Answer 4 */
}

2022-09-22 20:28

If you have any answers or tips

Popular Tags
python x 4647
android x 1593
java x 1494
javascript x 1427
c x 927
c++ x 878
ruby-on-rails x 696
php x 692
python3 x 685
html x 656
Popular Questions

1021 M2 Mac fails to install rbenv install 3.1.3 due to errors

1009 Error in x, y, and format string must not be None

1560 When building Fast API+Uvicorn environment with PyInstaller, console=False results in an error

853 Is there a way to get HttpServletRequest from the controller of spring mvc without adding a parameter to the method?

1052 Uncaught (inpromise) Error on Electron: An object could not be cloned

© 2025 OneMinuteCode. All rights reserved.