Hello
My English is not very good,
and my Japanese is much better so I'll speak in Japanese.
Today, it is my turn
to tell you about
web compatibility and DevTools.
This is currently in development.
As Karl mentioned,
this is an important tool
for assessing web compatibility.
For myself,
when investigating why my CSS properties,
HTML tags,
or JavaScript APIs
have gone missing,
or do not show up on my browser,
to check that
for all the properties
is extremely troublesome.
Therefore,
I am developing a tool
to solve these problems.
Before I go into that,
I would like to talk about DevTools.
You guys probably know this,
but Firefox has a tool called DevTools,
which is
targeted at web developers.
How many of you use this?
That's great.
So what is this tool about?
It is used to inspect
webpages -
its internal structure,
styles,
network and performance,
and anything else related to the web
that appears in the browser.
More specifically,
let's see -
I have DevTools open,
so you can see the webpage,
body,
everything
by session.
And you can see
the contents in every session,
and the structure of the webpage.
Not only can you inspect it,
but you can also make
some adjustments and changes to it.
For example,
the colour here is grey,
let's say I wanted to
change it
to pink,
or change the font,
by increasing the font weight.
You would be able to make these changes using the tool.
So in summary, Dev Tools
allows you to inspect,
and adjust things,
and these changes
will appear on the actual webpage.
So it helps the
web development process
become smoother.
That's one of the things it does.
Today, I would like to cover
the new functions and settings in DevTools.
You can do many things
with DevTools,
so I will talk about some of them.
The first is,
Inactive CSS,
and the other is Changes.
I will talk about
these two now.
So, inactive CSS -
for example,
there's an image here
which you would like to centralise.
What can you do?
The image is wrapped in the figure,
which is wrapped in the div,
so you would need to centralise it in the div.
There are a few ways to go about it.
For example,
you can use the property align-items.
So if you change this
to center,
the image should be centralised.
But it's not working.
Instead, here,
you get a pop-up.
If you click on the icon,
it says that align-items
needs to have a container
flex or grid,
otherwise there will be no effect.
So here,
I'm going to add
flex,
and now,
the image is centralised.
Let me give you
one other example -
let's take this,
which is wrapped by a link.
The place that says visited,
is linked to the number of visitors to the site.
I'm going to change the colour
to blue.
It works fine.
So,
now,
I'm going to try to make it
slightly bigger,
which doesn't work.
Why doesn't it work?
If you take a look at this,
it says that 'visited',
due to privacy reasons,
the styles that can be modified using this selector
are very limited.
Due to this restriction,
properties like this one
might not work.
In this way, inactive CSS
tells those of you developing webpages
what doesn't work,
or is useless,
and what you can do
to achieve certain effects.
It is a tool with detailed functions
to tell you that.
Let's look at another example.
This is
Changes.
Question:
what did I change here?
I won't be able to tell.
Even if I make many adjustments,
and changes using the tool,
I forget what I've done.
And when you're making a webpage,
that is pretty problematic.
For this, we have Changes.
As you can see from here,
Changes tells me
all the changes
that I have made,
by displaying them here.
By looking at this,
and reflecting them on my page,
the changes are clearer to me.
Another useful thing here is
there is a button
called 'copy all changes'.
I just clicked it.
And by doing this,
I am pasting it here.
So what I've just copied and pasted,
all the changes I've made in CSS just now,
can be downloaded
to text.
This is useful
when I am developing websites by myself,
as I would like to know
which parts I have changed.
But it's also useful for web designers,
when they use DevTools
to make adjustments,
to deliver them to someone else.
Before, maybe you would have to take screenshots,
or write a huge chunk
of text,
to explain what you have done.
Now,
you would be able to hand this over
to the developers.
We are interested in
being able to share these changes,
so we developed
this tool.
What else?
I would like to cover this.
This is a compatibility sidebar.
This is a tool that allows me to
troubleshoot problems
in the element
I have just selected.
For example,
where my name is,
if we inspect this,
there's one problem.
I'm using the property
padding-inline,
but this property is experimental,
and may not be supported
in other browsers.
If I look at this here,
it's not supported in Safari.
If I open it in Safari,
of course,
it's not supported,
which is a shame.
What can we do?
I can, for example,
using a padding shorthand
to do this,
so that it appears
in every page,
or browser.
Or, I can
For this image,
I'm actually using clip,
but this function
will be deprecated soon.
With clip
I'm going use it
to make this large image
slightly smaller.
It's a concern
that it will be deprecated.
It says 'not recommended'.
'Please try
using clip-path instead'.
That's what it says.
So let me try
using clip-path.
And the issue disappears,
but the value for the rect function
is invalid.
So let me look around
for something
that might be useful.
Hm -
it seems
different from what I expected.
Something like this.
It gives the feeling that you can do something
with this clip-path function.
You can use it
in any page or browser.
And just to show you another new tool
in DevTools,
there is a shape-editor,
which you can use to make changes
to these kinds of shapes.
For example, you can make this triangle shape.
And -
there's this property
called shape-outside.
If you do this,
the text that was wrapped around the shape,
now becomes wrapped
around the triangle.
Like this.
So you can make your text
flow around an image.
So I've reached the end of my talk,
but I am always discovering
problematic areas
like this,
reading documents and figuring out solutions,
so that we can provide
the same experience
on different web browsers.
And I hope you can use it frequently
and become connected with us.
I would be happy
if everyone can create beautiful websites.
That's all I have for today.
Also,
DevTools is constantly
developing new things,
and tweeting about it
on this Twitter account,
so please check it out.
That's all.
Thank you.